Quick Start

This short path takes you from a few HTML fields to an exported JavaScript object. The playground below is ready to try; on your own page, load SmarkForm first and initialize it after the marked-up HTML exists.

📖 Table of Contents

Load SmarkForm

For a quick browser test, load the UMD build from the CDN:

<script src="https://cdn.jsdelivr.net/npm/smarkform@0.25.0/dist/SmarkForm.umd.js"></script>

The interactive example already loads SmarkForm. Its JavaScript tab shows the initialization code used by the playground. For npm, ESM, or a downloaded local copy, see Getting SmarkForm.

Mark fields and export an object

Add data-smark to the fields SmarkForm should manage. Give each data field a name; SmarkForm uses those names as keys in the exported object.

🔗
🗒️ HTML
🎨 CSS
⚙️ JS 👁️ Preview 📝 Notes
❓ 
<div id="myForm">
  <p>
    <label data-smark>Name:</label>
    <input data-smark name="name" type="text">
  </p>
  <p>
    <label data-smark>Email:</label>
    <input data-smark name="email" type="email">
  </p>
</div>

const myForm = new SmarkForm(document.getElementById("myForm"), {
    "value": {
  "name": "Ada Lovelace",
  "email": "ada@example.com"
}
});// The playground's Export control uses the SmarkForm export action and shows
// the returned object in the editor. No custom JavaScript is needed here.

Try it: Change either value in the Preview tab, then choose Export in the playground controls. The editor shows an object like this:

{
  "name": "Ada Lovelace",
  "email": "ada@example.com"
}

The playground initializes the example with this data; no custom JavaScript is needed to display or export it.

The root can be a <div> or another suitable element; SmarkForm builds its component tree from that DOM. A native <form> is also supported when you want browser submission. SmarkForm does not provide a validation rule engine: native constraints such as required apply to browser form submission, while other export or submit flows need application validation (for example, an event hook before the action).

Choose an installation

Next steps

Read Core Concepts for the component-tree and HTML-to-data model. Then continue with the fuller developer walkthrough:

Next: Using SmarkForm — build up a practical form, connect actions, exchange data, and follow the relevant reference pages as you go.

Showcase & Examples
Examples
Start Here
Getting SmarkForm