![\"react-web-builder](\"https://raw.githubusercontent.com/sasza2/react-web-builder/master/docs/assets/intro-builder.gif\")
\n\n\n\n![\"Page](\"https://raw.githubusercontent.com/sasza2/react-web-builder/master/docs/assets/intro-view.png\")
\n\n> ⚠️ **Rule of thumb:** every prop you pass to `Loading…
\n\n return (\n![\"Custom](\"https://raw.githubusercontent.com/sasza2/react-web-builder/master/docs/assets/components01.gif\")
\n\n### With editable properties\n\nEach entry in `props` becomes a field in the sidebar and is passed to your component as a prop with the same `id`.\n\n```jsx\nconst Hero = ({ title, subtitle, backgroundColor, ctaUrl, rounded }) => (\n {subtitle}
\n \n Get started\n \n![\"Editing](\"https://raw.githubusercontent.com/sasza2/react-web-builder/master/docs/assets/components03.gif\")
\n\n### Property types at a glance\n\n| Type | Value shape | Use for |\n| --- | --- | --- |\n| `text` | `string` | Single-line input |\n| `number` | `number` | Range slider between `min` and `max` (default 0–20) |\n| `toggle` | `boolean` | On/off switch |\n| `color` | `string` (hex) | Color picker |\n| `select` | `string` | Dropdown, needs `options[]` |\n| `richtext` | `TextElement[]` | Slate rich text - render with `\n\n)\n\nconst components = [\n {\n id: 'quote',\n label: 'Quote',\n component: Quote,\n props: [\n { id: 'content', label: 'Quote', type: 'richtext', colorAvailable: true, hyperlinkAvailable: true },\n { id: 'author', label: 'Author', type: 'text' },\n ],\n },\n]\n```\n\nNeed the raw styles instead of the markup? `react-web-builder/useBoxStyle` returns a `React.CSSProperties` object from `border` / `boxShadow` values.\n\n### Conditional fields\n\nEvery property accepts a `visibility` function. Return a truthy value to show the field.\n\n```jsx\nprops: [\n { id: 'showAvatar', label: 'Show avatar', type: 'toggle' },\n {\n id: 'avatarColor',\n label: 'Avatar color',\n type: 'color',\n visibility: ({ formValues }) => formValues.showAvatar,\n },\n {\n id: 'mobileOnlyNote',\n label: 'Mobile note',\n type: 'text',\n visibility: ({ breakpoint }) => breakpoint.from < 768,\n },\n]\n```\n\nThe callback receives `{ breakpoint, element, formValues, prop }`.\n\n### Transforming values before render\n\n`transformElementProperty` lets you rewrite stored values on their way to your components - signing image URLs, prefixing routes, resolving CMS ids:\n\n```tsx\nimport WebBuilder, {\n WebBuilderComponentProperty,\n WebBuilderElementProperty,\n} from 'react-web-builder'\n\nconst transformElementProperty = (\n componentProp: WebBuilderComponentProperty,\n elementProp: WebBuilderElementProperty,\n): unknown => {\n if (componentProp?.type !== 'img') return elementProp.value\n return { ...elementProp.value, location: toCdnUrl(elementProp.value.location) }\n}\n\n\n {author}\n
![\"Breakpoints](\"https://raw.githubusercontent.com/sasza2/react-web-builder/master/docs/assets/breakpoints01.png\")
\n\nMore: [docs/03-BREAKPOINTS.md](./docs/03-BREAKPOINTS.md).\n\n## Templates\n\nA template is a tree (`row` / `column` / `component` / `fixed` nodes) attached to a breakpoint. It is applied when the builder opens, so users start from a real layout instead of an empty grid.\n\n```tsx\nconst templateDesktop: Tree = {\n id: 'root',\n type: 'row',\n w: 10,\n marginTop: 0, marginBottom: 0, marginLeft: 0, marginRight: 0,\n children: [\n {\n id: 'heading',\n type: 'component',\n w: 8,\n marginTop: 0, marginBottom: 0, marginLeft: 2, marginRight: 0,\n element: { id: 'el-1', componentName: 'Box', props: [], h: 'auto', x: 0, y: 0, w: 8 },\n },\n ],\n}\n\nconst page = {\n breakpoints: [{ id: 'desktop', from: 1280, to: null, cols: 10, rowHeight: 15,\n padding: { top: 15, left: 15, right: 15, bottom: 0 },\n template: templateDesktop }],\n} as Page\n```\n\n![\"Template](\"https://raw.githubusercontent.com/sasza2/react-web-builder/master/docs/assets/templates01.gif\")
\n\nPair it with `onTemplateRestart` to let users reset back to the starting layout. Full example: [docs/04-TEMPLATES.md](./docs/04-TEMPLATES.md).\n\n## Fonts\n\n```jsx\nimport WebBuilder, { FontImport } from 'react-web-builder'\n\nconst fonts: FontImport[] = [\n {\n label: 'Inter',\n value: 'inter',\n fontFamily: \"'Inter', sans-serif\",\n stylesheet: (\n <>\n \n \n \n \n ),\n },\n]\n\n