> ## Documentation Index
> Fetch the complete documentation index at: https://superdoc-caio-pizzol-docs-ai-core-preset.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Quick Start Guide
Get your template builder up and running in 5 minutes.
## Installation
```bash theme={null}
npm install @superdoc-dev/template-builder
```
## Basic usage
Import the component and styles, then render with minimal props:
```jsx theme={null}
import SuperDocTemplateBuilder from "@superdoc-dev/template-builder";
import "superdoc/style.css";
function App() {
return (
);
}
```
That displays an empty document. Type `{{` to open the field menu and insert fields.
## Load an existing document
Most templates start from an existing document:
```jsx theme={null}
```
The component loads the document and discovers any existing fields.
## Add field types
Distinguish between owner-filled and signer-filled fields:
```jsx theme={null}
```
Fields default to `'owner'` when no `fieldType` is specified.
### Add preset block content
If a field should insert a predefined structure (for example, a table), add `presetContent` on a block field:
```jsx theme={null}
Column A
Column B
",
},
},
],
}}
/>
```
`presetContent` applies only to block fields. Inline fields ignore it.
* `presetContent.json` is recommended when you need the most reliable preservation of structure, semantics, and editor-compatible styling.
* With `presetContent.html`, include required attributes and inline styles explicitly so the HTML parser can map them into node attributes.
### Color-code fields in the editor
Import the optional CSS to visually distinguish field types:
```jsx theme={null}
import "@superdoc-dev/template-builder/field-types.css";
```
Without `field-types.css`, structured content fields use the default Word-like appearance: borders are transparent and only visible on selection. Importing this stylesheet makes field borders always visible and color-coded by field type, which helps template authors quickly identify fields in the document.
Customize colors with CSS variables:
```css theme={null}
:root {
--superdoc-field-owner-color: #629be7;
--superdoc-field-signer-color: #d97706;
}
```
## Add the field list sidebar
Show all template fields in a sidebar:
```jsx theme={null}
```
Users can click fields in the list to jump to them in the document.
## Handle field changes
Track when fields are inserted, updated, or deleted:
```jsx theme={null}
function App() {
const [templateFields, setTemplateFields] = useState([]);
return (
{
console.log("Template now has", fields.length, "fields");
setTemplateFields(fields);
}}
/>
);
}
```
The `onFieldsChange` callback receives the complete list of fields in the template whenever they change. Each field includes its `fieldType`.
## Export the template
Use a ref to programmatically export:
```jsx theme={null}
import { useRef } from "react";
function App() {
const builderRef = useRef(null);
const handleExport = async () => {
await builderRef.current?.exportTemplate({
fileName: "my-template",
triggerDownload: true,
});
};
return (
<>
{
console.log("Exported", event.fields.length, "fields");
}}
/>
);
}
```
The exported document contains all field definitions embedded as Structured Document Tags.
## TypeScript support
Full TypeScript definitions are included:
```tsx theme={null}
import SuperDocTemplateBuilder from "@superdoc-dev/template-builder";
import type {
SuperDocTemplateBuilderHandle,
FieldDefinition,
TemplateField,
} from "@superdoc-dev/template-builder";
const builderRef = useRef(null);
const availableFields: FieldDefinition[] = [
{ id: "1", label: "Customer Name", defaultValue: "John Doe" },
{ id: "2", label: "Signer Name", fieldType: "signer" },
];
const handleFieldInsert = (field: TemplateField) => {
console.log(`Inserted: ${field.alias} (${field.fieldType})`);
};
```
## Next steps
Learn about custom components, field creation, and advanced features