Forma THE FORMA FIELD GUIDE ↗
Build it.
Make it yours.
Your canvas, your components, your code.
The docs for turning “what if” into “it works.”
89 component pagesJS + C# examplesYour next good idea
A LITTLE INPUT. A LITTLE MAGIC.
Hey, builder.
Your first interaction starts right here.
Go on. It actually works.
button.script.js
Idea → interface → interactionforma.on("Click", () => {
const name = forma.get("nameInput", "value");
forma.set("greeting", "text", `Hey, ${name}.`);
});Pick your next move.
The blank canvas won’t stay blank for long.01
THE FIRST FIVE MINUTES
Meet your canvas
Forms, containers, and the workspace. Start here, finish with a working app.
02
89 COMPONENTS, NO GUESSWORK
Find your component
Every control. Every supported property. The right key, the first time.
03
MAKE IT DO THE THING
Give it some brains
Events, reactive bindings, imports, and providers. Your logic, your rules.
SMALL API. PLENTY OF POSSIBILITIES.
The right value.
At the right time.
Read a snapshot. Bind a live value. Share a provider.
No more “why is my name still empty?”
FROM CANVAS TO CODE
One component. Four sources.
Style, setup, event handlers, custom data. Each gets its own file and editor tab.
greetingButton / Custom Properties
:host {
background-color: #8b5cf6;
color: #ffffff;
border-radius: 10px;
}
:host:hover {
background-color: #7c3aed;
}import { ButtonEventHandler } from "./event.js";
forma.on("Click", ButtonEventHandler.greetingButton_Click);export class ButtonEventHandler {
/** @param {FormaEvent<"Click">} event */
static greetingButton_Click(event) {
const name = forma.get("nameInput", "value");
forma.set("greetingLabel", "text", `Hey, ${name}.`);
}
}{
"clicks": 0,
"description": "My custom component"
}Built for builders who ask
“Can we make it do this?”