The A-Frame editor is based on the A-Frame inspector with additional features:

• Undo/redo feature for all the actions you do in the editor.
• The '+' button and n shortcut add a new child entity to the selected entity.
• Copy entity HTML to clipboard and paste it in an other scene
• Better copy a-scene HTML to clipboard with a dedicated button. This replaces the aframe-watcher button.
• Reparent and reorder an entity
• And more... see roadmap

See video

Use aframe 1.7.1 or later:

<script src="https://aframe.io/releases/1.7.1/aframe.min.js"></script>

To load the A-Frame editor instead of the A-Frame inspector, specify the url like this:

<a-scene
  inspector="url: https://cdn.jsdelivr.net/gh/c-frame/aframe-editor@1.7.x/dist/aframe-editor.min.js">

A-Frame inspector component comes with a keyboard shortcut to inject the editor. Just open up your A-Frame scene where you customized the inspector url and press <ctrl> + <alt> + i to inject the editor.

git clone git@github.com:c-frame/aframe-editor.git
cd aframe-editor
npm install
npm start

Then navigate to http://localhost:3333/examples/

The textures modal is using https://aframe.io/sample-assets/dist/images.json to get the available textures. The GitHub repository for those assets is https://github.com/aframevr/sample-assets

If you want to self-host this directory, do the following:

cd examples
git clone git@github.com:aframevr/sample-assets.git

edit index.html and define before any script tag this global variable:

<script>window.AFRAME_SAMPLE_ASSETS_ROOT = "./sample-assets/";</script>

You have the undo and redo buttons in the top bar on the left. The shortcuts are the following (also described in the help modal).

On macOS:

• cmd + z to undo an action
• cmd + shift + z to redo an action

on Windows and Ubuntu:

• ctrl + z to undo an action
• ctrl + shift + z to redo and action

Compared to the A-Frame inspector where you actually already have that feature by selecting a-scene and then "Copy entity HTML to clipboard", the A-Frame editor has additional changes:

• keep the original order of properties in components you defined yourself in the html file
• scene components: remove the injected components if the properties doesn't differ from the defaults
• light: don't remove the type: directional property even if it's the default
• geometry: don't remove the primitive: box property even if it's the default
• laser-controls: remove all injected components
• hand-controls: remove all injected components
• environment: remove children and fog component on a-scene
• blink-controls: remove created entities
• movement-controls: remove injected components

The editor perspective camera position is kept in sync with the A-Frame active camera. This means you can move around the scene, toggle the inspector and you will be at the same position. If you want to disable that behavior, you can do that by defining a global variable like this:

<script>
  window.AFRAME_INSPECTOR_CONFIG = { copyCameraPosition: false };
</script>

If you run the A-Frame Watcher from a different host or port, you can set AFRAME_INSPECTOR_CONFIG to specify a custom endpoint like this:

<script>
  window.AFRAME_INSPECTOR_CONFIG = {saveEndpoint: "http://my-custom-host.org:1234/save"};
</script>