Presolve/Examples
Docs

Interactive examples · source included

See the browser plans work.

Every preview below is running in this Presolve route. Use it, inspect the matching source, and follow the linked guide for the compiler products and lifecycle behind the behavior.

Current Presolve syntaxReal compiler artifactsNo generic hydrationMobile and keyboard ready
State + Actions + Computed

Cart quantity

Read the guide →
Compiler field notesDigital edition · immediate delivery
1copies
Total$
Sourceapp/routes/cart.tsx
import { action, Component, state } from "presolve";export class Cart extends Component {quantity = state(1);get total() { return this.quantity * 24; }increase = action(() => { this.quantity += 1; });decrease = action(() => { this.quantity -= 1; });}
Boolean State

Preference toggle

Resume behavior →
Release notificationsCurrent preference: true
State retained for resumeARIA state updates with the same binding
Sourceapp/components/Preference.tsx
export class Preference extends Component {enabled = state(true);toggle = action(() => {this.enabled = !this.enabled;});}
State + Computed + Attribute Bindings

Production feature rollout

Update planning →
Release channelruntime-v2 / production
Healthy
Audience exposure25%
Estimated accounts
Automatic rollbackPause when error budget is exceeded
Sourceapp/components/RolloutControl.tsx
export class RolloutControl extends Component {rollout = state(25);guardrails = state(true);get accounts() { return this.rollout * 40; }setFifty = action(() => { this.rollout = 50; });toggleGuardrails = action(() => {this.guardrails = !this.guardrails;});}
Actions + Conditional Structure

Build pipeline explorer

Structural rendering →
01 · AnalyzeOne semantic graph

Presolve resolves identity, ownership, dependency order, and exact update plans before publication.

  • component.runtime.json
  • forms.runtime.json
  • resume.runtime.json
Sourceapp/components/PipelineExplorer.tsx
export class PipelineExplorer extends Component {compiler = state(true);browser = state(false);showBrowser = action(() => {this.compiler = false;this.browser = true;});// Each branch is compiler-authored structural membership.{this.browser ? <BrowserPlan /> : null}}
Forms + Validation + Submission

Beta access application

Form lifecycle →
Private beta · team applicationTell us about the product you are shipping.

Every control binds to an owned Field; the nested value is assembled by the compiler, not scraped from the DOM.

Try an empty or malformed field first. Native validity and Presolve's compiled rules both block submission.

Required fieldsMinimum lengthEmail formatValidate before submit
Accepted: 0Valid submissions update State locally.
Sourceapp/components/Signup.tsx
import { defineForm, email, field, minLength, required } from "presolve";signup = defineForm({serialization: "json",fields: {name: field({ initial: "", validate: [required(), minLength(2)] }),email: field({ initial: "", validate: [required(), email()] }),company: field({ initial: "", validate: [required(), minLength(2)] }),productUpdates: field({ initial: true }),},submit: async ({ value, signal }) => {this.submissions += 1;},});
Files + FormData + Validation

Creative asset intake

File field lifecycle →
Campaign launch · asset handoffPrepare browser files for an explicit submission boundary.

File objects stay browser-owned, are excluded from resume snapshots, and enter the submission value only through FormData serialization.

Native FileListRequired validationFormData serializationCold reset on resume
Accepted batches: 0The demo records valid local submissions without uploading your files.
Sourceapp/components/AssetIntake.tsx
import { defineForm, field, required } from "presolve";upload = defineForm({serialization: "form-data",fields: {assets: field<File[]>({initial: [], validate: [required()]}),},submit: async ({ value, signal }) => {this.accepted += 1;},});<input type="file" multiple required bind:files={this.upload.fields.assets} />

Build your own

Start from the same compiler contract.

The generated starter includes a real interactive route, global CSS, public metadata, and the project structure used throughout these examples.

Create a project →Browse the API