Forge Guide › Visual scripting
Visual scripting with blocks
The Blocks tab is a drag-and-drop editor for page behaviour. It is not a simulation: every change regenerates plain JavaScript into a normal file in your project.
Opening the block editor
Open the code panel with Ctrl + ' and choose the Blocks tab.
The first time you open it, Forge creates js/blocks.js and drops in a starter program.
Blocks are grouped the way you would reach for them: Events, Elements, Looks, Control, Logic, Math, Text and Data, plus Variables and Functions.
A first program
A typical first build is a button that changes some text. Drag when [element] clicked from Events, plug an element block into it, choose your button from the dropdown, then drop set text of [element] to [text] inside it.
That produces:
forgeAll("#cta").forEach(function (el) {
el.addEventListener("click", function (event) {
forgeAll(".headline").forEach(function (el) {
el.textContent = "Thanks!";
});
});
});Press Show code at any time to see exactly what your blocks compile to. It is ordinary JavaScript with no framework and no runtime dependency.
The element picker
The element block's dropdown is populated live from the page you are editing. It lists every id, then the classes in use, then common tags. You are choosing from elements that actually exist rather than typing a selector and hoping.
If you need something more specific, the CSS selector block accepts any selector you type.
What the blocks can do
| Category | Examples |
|---|---|
| Events | Clicked, double-clicked, hovered, changed, submitted, key pressed, page loads |
| Looks | Set text, set a style property, add / remove / toggle a class, show, hide |
| Control | If, repeat, while, wait, every N seconds, smooth scroll to, open a page |
| Data | Read an input value, set an attribute, log to console, show a message |
Combined with the standard Logic, Math, Text, Variables and Functions blocks, that covers most of what a brochure site or landing page needs: mobile menus, tabs, accordions, form feedback, scroll-to-section links and simple timed effects.
Running and shipping it
Page scripts are off on the design canvas by default so they cannot interfere with editing. Use Run on canvas in the Blocks toolbar to switch them on, or just open Preview, which always runs them.
On export, js/blocks.js is written into your project like any other script and linked from
the page. Nothing about the blocks travels with it - the file is self-contained JavaScript that runs
anywhere.
Moving to handwritten code
Blocks and the JavaScript tab are two views of the same project, but they are not bidirectional: editing the generated file by hand will be overwritten next time the blocks change. When you outgrow blocks, copy the generated code into a new script file and work there instead.
A wait block inside a handler makes that handler asynchronous automatically, so you do not have to think about promises to use it.