# Self Editing Tool
In this environment you will be able to directly manipulate text and even execute the text as code by pinching these short snippets.
3 min demonstration video https://video.benetou.fr/w/ok9a1v33u2vbvczHPp4DaE
You can test it live at https://fabien.benetou.fr/pub/home/future_of_text_demo/engine/
See also the AR version https://video.benetou.fr/w/x7HeEBF9HGfdVyf7vWsKsQ
Note that the master branch is never the most up to date branch. Instead see https://git.benetou.fr/utopiah/text-code-xr-engine/branches for an overview. To explore branches in VR see https://fabien.benetou.fr/pub/home/future_of_text_demo/engine/branches.html
In order to have a better view of the different features accross branches see https://mastodon.pirateparty.be/web/@utopiah and https://twitter.com/utopiah/ which act as a kind of live documentation of the process.
First communicated on https://twitter.com/utopiah/status/1531188862415929344 as way to work on (WebXR) code during a flight.
## Minimalist example
```html
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1" / >
< title > JXR minimalist template< / title >
< script src = "https://aframe.io/releases/1.5.0/aframe.min.js" > < / script >
< script src = "https://unpkg.com/aframe-troika-text/dist/aframe-troika-text.min.js" > < / script >
< script src = "https://cdn.jsdelivr.net/gh/kylebakerio/a-console@1.0.2/a-console.js" > < / script >
< script src = "https://fabien.benetou.fr/pub/home/future_of_text_demo/engine/jxr.js" > < / script >
<!-- use to define targets and left/right pinch interactions, respectively execute code and move targets -->
< / head >
< body >
< div style = "position:fixed;z-index:1; top: 0%; left: 0%; border-bottom: 70px solid transparent; border-left: 70px solid #eee ;" >
< a href = "https://git.benetou.fr/utopiah/text-code-xr-engine/issues/" >
< img style = "position:fixed;left:10px;" title = "code repository"
src="https://fabien.benetou.fr/pub/home/future_of_text_demo/engine/gitea_logo.svg">
< / a >
< / div >
< button id = "mainbutton" style = "display:none; z-index: 1; position: absolute; width:50%; margin: auto; text-align:center; top:45%; left:30%; height:30%;" onclick = "startExperience()" > Start the experience (hand tracking recommended)< / button >
< a-scene >
< a-entity id = "rig" >
< a-entity id = "player"
hud camera look-controls wasd-controls waistattach="target: .movebypinch" position="0 1.6 0">< / a-entity >
< a-entity id = "rightHand" pinchprimary hand-tracking-controls = "hand: right;" > < / a-entity >
< a-entity id = "leftHand" pinchsecondary wristattachsecondary = "target: #box " hand-tracking-controls = "hand: left;" ></ a-entity >
< / a-entity >
< a-troika-text value = "SpaSca : Spatial Scaffolding" anchor = "left" outline-width = "5%" font = "https://fabien.benetou.fr/pub/home/future_of_text_demo/content/ChakraPetch-Regular.ttf" position = "-5.26197 6.54224 -1.81284"
scale="4 4 5" rotation="90 0 0" troika-text="outlineWidth: 0.01; strokeColor: #ffffff " material="flatShading: true; blending: additive; emissive: #c061cb "></ a-troika-text >
< a-sky hide-on-enter-ar color = "black" > < / a-sky >
< a-entity hide-on-enter-ar = "" id = "environmentsky" class = "hidableenvironment" > < / a-entity >
< a-troika-text anchor = "left" target value = "instructions : \n--right pinch to move \n--left pinch to execute" position = "0 0.65 -0.2" scale = "0.1 0.1 0.1" ></ a-troika-text >
< a-troika-text anchor = left target id = "locationreload" value = "jxr location.reload()" position = "0 1.20 -0.1" scale = "0.1 0.1 0.1" > < / a-troika-text >
< a-troika-text anchor = left target id = "makeAnchorsVisibleOnTargets" value = "jxr makeAnchorsVisibleOnTargets()" position = "0 1.05 -0.1" scale = "0.1 0.1 0.1" > < / a-troika-text >
< a-console position = "0 1.1 -0.8" rotation = "-45 0 0" font-size = "34" height = "0.5" skip-intro = "true" > < / a-console >
< / a-scene >
< / body >
< / html >
```
