About SmarkForm
Manifesto
Playground
Interactive examples let you try SmarkForm forms directly in the documentation. This page explains their tabs and controls, then gives you a complete form to experiment with.
TL;DR: Open 👁️ Preview to interact with fields. Use 📋 Show playground editor to exchange JSON, or choose ✏️ Edit → ▶️ Run to try source changes. Start with the complete event-plan example.
📖 Table of Contents
Interactive examples
Interactive examples combine a runnable form with its source code and example-specific guidance. Most offer some or all of these tabs:
- 🗒️ HTML shows the example’s markup.
- 🎨 CSS shows its styles when the example has them.
- ⚙️ JS shows its JavaScript when the example has it.
- 👁️ Preview runs the example in an isolated, sandboxed frame.
- 📝 Notes gives guidance specific to that example.
Link to an example’s default tab with its anchor, or add a tab name after a colon to open that tab directly—for example, #example-simple_number:preview or #example-simple_number:html. The available suffixes are html, css, js, preview, and notes. A deep link is also a real anchor, so the browser scrolls directly to the tab row. Clicking a tab updates the fragment without scrolling or adding a browser-history stop; Back returns to the previous page rather than stepping through every tab.
Preview and the JSON playground
Use 👁️ Preview to edit fields and interact with the form. The 📋 Show playground editor checkbox shows or hides a JSON editor alongside the form.
The playground controls operate on the form data:
⬇️ Exportcopies the current form data into the JSON editor.⬆️ Importapplies the JSON editor’s value to the form.♻️ Resetrestores the form’s initial data and clears the JSON editor.❌ Clearempties the form.
Editing an example
Choose ✏️ Edit to turn the available source tabs into syntax-highlighted code editors. They start with the example’s original source. Changes affect only this preview; choose ▶️ Run to render them. Leaving Edit mode discards those changes and restores the original source.
The JSON playground editor is itself a SmarkForm field. It sits in a larger form with the example as a subform; that outer form is omitted from the source shown by default so the focus stays on the example.
To inspect the full source and see how the editor uses SmarkForm, choose ✏️Edit and check 📋 Include playground editor. Some examples disable the editor controls when they would conflict with the example’s own behavior.
Try a complete form
This event plan includes basic fields and a guest list. Each guest is a nested form with a name, email address, and meal choice. The initial values are sample data; change them freely.
🔗
<div id="myForm">
<div class="event-plan">
<h3>Community Picnic</h3>
<div class="event-fields">
<label>Event name <input data-smark type="text" name="title"></label>
<label>Date <input data-smark type="date" name="date"></label>
<label>Location <input data-smark type="text" name="location"></label>
</div>
<fieldset>
<legend>Guests</legend>
<ul data-smark='{"type":"list","name":"guests","of":"form","min_items":1,"max_items":6}'>
<li>
<div class="guest-card">
<label>Name <input data-smark type="text" name="name" placeholder="Guest name"></label>
<label>Email <input data-smark type="email" name="email" placeholder="name@example.com"></label>
<label>Meal
<select data-smark name="meal">
<option value="Standard">Standard</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Vegan">Vegan</option>
</select>
</label>
<button data-smark='{"action":"removeItem","failback":"clear"}' type="button" title="Remove guest">Remove</button>
</div>
</li>
</ul>
<button data-smark='{"action":"addItem","context":"guests"}' type="button">➕ Add guest</button>
</fieldset>
</div>
</div>
#myForm .event-plan { max-width: 42rem; margin-inline: auto; }
#myForm .event-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; }
#myForm label { display: grid; gap: .25rem; }
#myForm input, #myForm select { box-sizing: border-box; width: 100%; }
#myForm ul { list-style: none; padding: 0; }
#myForm .guest-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); align-items: end; gap: .75rem; margin-block: .5rem; padding: .75rem; border: 1px solid #ccc; border-radius: .5rem; }
const myForm = new SmarkForm(document.getElementById("myForm"), {
"value": {
"title": "Community Picnic",
"date": "2026-06-20",
"location": "Riverside Park",
"guests": [
{"name": "Alex Rivera", "email": "alex@example.com", "meal": "Vegetarian"},
{"name": "Sam Chen", "email": "sam@example.com", "meal": "Standard"}
]
}
});// The fields and guest list are handled declaratively; this example needs no custom JavaScript.
The guest list keeps one required row. Removing the last guest clears that row instead of removing it. This tab can also include example-specific notes or insights; some examples omit it when there is nothing extra to add.
Explore more examples:
Interactive examples live throughout the guides and component references, beside the concepts and features they demonstrate. For a curated selection of the most useful examples in one place, visit the Showcase.
How the editor is built
The interactive controls surround the form shown in the HTML tab; they are not part of that example’s source. This keeps the example focused on the form itself while still providing a reusable way to inspect and change its data.
When enabled, the editor places the example inside a demo subform and adds a JSON textarea beside it. Export and Import target only the demo form, so the editor controls stay outside the data being edited. Clear clears the demo form; Reset restores the root form’s initial value and empties the JSON textarea. The controls are ordinary SmarkForm components and triggers.
The Edit toolbar can include or omit this generated editor in the preview source. This lets authors compare the compact form markup with the complete runnable version without changing the documented form itself.