Get started

Solution · Forms

Forms shaped by a schema. Ready for real workflows.

Build a multi-step intake, reveal fields when they matter, and keep drafts with storage your app controls. Explore the in-development builder and preview the form beside it.

Status: in development

Try the forms demoStart with the schema

Edit a schema, then try the form

Try this

  • In the intake, choose “In person” to reveal the visit step.
  • Edit a field and watch the draft notice update; this demo keeps drafts in memory.
  • Open the visual builder, add or reorder a field, and inspect its preview and JSON.

Use Reset to return to the starting example.

Interactive preview

Fictional data · in-memory drafts · no network submission

Fill the workshop intake

Choose “In person” to reveal the visit step. Edit a field to exercise local autosave.

SchemaForm

Community workshop request

A fictional example.com event. Nothing is submitted or stored on a server.

About you

Share a few details for the workshop team.

The sample form is ready. Drafts remain in memory for this page session.

Open the visual builder

The builder was released in @texuli/forms 0.18.0 (in development, pre-1.0).

2 fields · schema valid

Canvas

Preview

Workshop contact form

Schema

2 fields in the authored schema.

Builder output updates its validated preview and schema JSON as you edit.

If the interactive demo cannot load, use the static preview above.

One schema, from first draft to a working form.

Ask the next question at the right time.

Closed expressions control visibility and required state. Conditions read only fields already declared, so the form stays predictable and cycle-free.

  • Schema forms

Keep long intakes in clear steps.

Move through a focused step at a time. The view validates before advancing and can restore the current step with a saved draft.

  • Steps and conditions

in development

Shape fields, then inspect the result.

The visual builder was released in 0.18.0 and is still in development. It edits field order and settings, validates the schema, and shows a live preview.

  • Visual builder

From a closed schema to a form people can finish.

  1. Describe the fields

    Use a closed schema with named field types, options and validation constraints.

    Package: @texuli/forms

  2. Validate conditions

    Compile the schema before rendering. Invalid members, expressions and field relationships produce issues.

    Package: @texuli/forms

  3. Render each step

    Mount SchemaForm with Texuli controls, accessible validation and multi-step navigation.

    Package: @texuli/forms

  4. Choose draft storage

    Pass a host storage adapter for drafts and autosave. This demo keeps its sample draft in memory only.

    Package: @texuli/forms

  5. Build and preview

    Use the in-development builder (released in 0.18.0) to arrange fields, edit settings and inspect schema JSON before adoption.

    Package: @texuli/forms

Forms is built from @texuli/forms, on texuli, @texuli/core and @texuli/drag.

Solution

Forms

Packages

  • L4@texuli/formsSchema, model, controls and host rendering are in development and published on npm; the builder was released in 0.18.0.Subpaths: . · ./model · ./controls · ./builder · ./host

Built on

  • L3texuli (Styled components)
  • L0@texuli/core (Texels and the URL policy)
  • L0@texuli/drag (Drag engine)

Build with Forms

Start with a form schema

Validate a schema

import { validateFormSchema } from '@texuli/forms/model';

const result = validateFormSchema({
  title: 'Contact example.com',
  fields: [
    { name: 'email', type: 'email', label: 'Email address', required: true },
  ],
});

if (result.ok) {
  console.log(result.form.schema.title);
} else {
  console.error(result.issues);
}

Keep a local draft

import { createMemoryDrafts } from '@texuli/forms/model';
import { SchemaForm } from '@texuli/forms';

const drafts = { storage: createMemoryDrafts(), key: 'intake-preview' };
// Pass {form, drafts} to SchemaForm. Your app can supply another storage adapter.

Verified by tests/e2e/site-solution-forms.spec.ts

Keep building

For agents

A host can validate a schema before rendering it. The builder is a developer-facing authoring tool; it does not execute generated code or send form submissions.

  • @texuli/forms/model@texuli/forms/model: In development

    Closed form schema validation and controller logic, available in the in-development package.

  • @texuli/forms/builder@texuli/forms/builder: Planned

    Visual field authoring and preview; present in this branch and planned for the next release.

Platforms

  • Web

    Web: In development

    Svelte 5 packages published on npm (pre-1.0).

  • Compose Desktop

    Compose Desktop: Planned

    Kotlin Multiplatform renderer on the JVM, built in this repository.

  • Android

    Android: Planned

    Native renderer target.

  • iOS

    iOS: Planned

    Native renderer target.

How the native renderer works

Start building with Forms

Schema-driven forms with conditions, steps and drafts.

Build a schema formForms capability reference@texuli/forms on npm
A low horizon of stacked cubes rising to one glowing pearl cube under a wide open skyA low horizon of stacked cubes rising to one glowing pearl cube under a wide open sky