Tutorial #
Intro Video #
Guide #
Creating a Codestrate #
This guide will get you started in the alpha test of Codestrates v2 and Cauldron. The platform is not released for self-hosting yet, so for now it is only available on our public Webstrates server demo.webstrates.net. The front page allows you to sign in using a GitHub account (not mandatory).
To create an empty webstrate with the Codestrates framework installed use the URL:
Note that this webstrate has a permanent autogenerated URL. In the top right corner you should see an Edit button. Click on that.
You should now see the Cauldron editor. Dragging the top bar of Cauldron allows for docking it to the left, right, bottom or as a free-floating window.
Adding Content #
Lets try to make a bit of content on our page.
Right-click on body in the TreeBrowser pane and add an HTML fragment under the sub-menu Insert fragment.
You can now double-click the new fragment to edit it.
Try adding <h1>Welcome</h1> to it and press the Auto button in the top right corner of the editor.
The header should now show up on the page.
The fragment is added to the DOM of the page in the following form:
<code-fragment data-type="text/html">
<h1>Welcome</h1>
<code-fragment>
If you inspect the page you will see that a transient
element has been added below the code fragment.
Transient elements are Webstrates specific elements that are not persisted.
This element is the rendering of the HTML stored as code in the code fragment.
It automatically re-renders when you change the HTML source.
Adding Interactivity and Style #
Now try to add a JavaScript fragment and write some code, e.g., alert("Hello, world!").
Try to press Run.
If you toggle Auto the code will be run on load.
Note that JavaScript fragments with auto enabled will be run in the order they appear in the document.
Similarly you can add CSS fragments and style your content. Note that you must toggle auto to activate the CSS fragment.