Render your first FieldCraft form in under 5 minutes.
1. Define a Schema
A FieldCraft schema is a plain TypeScript/JSON object that describes your form. Every schema needs an id, version, title, submitAction, and at least one section with questions.
import type { FormEngineSchema } from "@squaredr/fieldcraft-core";
export const feedbackSchema: FormEngineSchema = {
id: "feedback",
version: "1.0.0",
title: "Quick Feedback",
submitAction: { type: "callback" },
sections: [
{
id: "main",
title: "Your Feedback",
questions: [
{
id: "name",
type: "short_text",
label: "Your Name",
required: true,
},
{
id: "rating",
type: "rating",
label: "How would you rate your experience?",
config: { maxStars: 5 },
},
{
id: "recommend",
type: "boolean",
label: "Would you recommend us to a friend?",
},
{
id: "comments",
type: "long_text",
label: "Any additional comments?",
placeholder: "Tell us what you think...",
},
],
},
],
};
2. Render with FormEngineRenderer
FormEngineRenderer is a self-contained component. Pass it a schema and an onSubmit callback — it handles rendering fields, validation, navigation, and calling your callback with the response.
"use client";
import { FormEngineRenderer } from "@squaredr/fieldcraft-react";
import type { FormResponse } from "@squaredr/fieldcraft-core";
import { feedbackSchema } from "@/schemas/feedback";
export default function FeedbackPage() {
const handleSubmit = async (response: FormResponse) => {
console.log("Form submitted:", response);
// response includes: schemaId, schemaVersion, values,
// submittedAt, sessionToken, scores, completionTimeMs
};
return (
<div className="max-w-xl mx-auto py-12 px-4">
<FormEngineRenderer
schema={feedbackSchema}
onSubmit={handleSubmit}
/>
</div>
);
}
That's it. You now have a working form with star ratings, a boolean toggle, text inputs, and built-in validation.
3. Add a Theme (Optional)
FieldCraft ships with 6 built-in theme presets. Pass one to change the look instantly:
import { FormEngineRenderer, darkPreset } from "@squaredr/fieldcraft-react";
<FormEngineRenderer
schema={feedbackSchema}
onSubmit={handleSubmit}
theme={darkPreset}
/>
Available presets: cleanPreset, modernPreset, darkPreset, highContrastPreset, clinicalPreset, playfulPreset.
4. Persist Responses (Optional)
Instead of handling storage yourself, use one of the free storage adapters:
import { FormEngineRenderer } from "@squaredr/fieldcraft-react";
import { createSupabaseAdapter } from "@squaredr/fieldcraft-supabase";
const adapter = createSupabaseAdapter({
supabaseUrl: process.env.NEXT_PUBLIC_SUPABASE_URL!,
supabaseKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
table: "form_responses",
});
<FormEngineRenderer
schema={feedbackSchema}
adapters={adapter}
onSubmit={(response) => console.log("Saved!", response)}
/>
5. What's Next?