diff --git a/README.md b/README.md
index 22c205ab..692d2a75 100644
--- a/README.md
+++ b/README.md
@@ -59,6 +59,8 @@ For quick prototyping or simple projects, you can use a CDN:
 <link rel="stylesheet" href="https://unpkg.com/formeo@latest/dist/formeo.min.css">
 ```
 
+This exposes the `window.FormeoEditor` and `window.FormeoRenderer` globals. For production, pin a version (e.g. `formeo@5.13.1`) instead of `@latest` and add an `integrity` hash with `crossorigin="anonymous"` — see [Installation](docs/renderer/renderer.md#installation) in the renderer docs.
+
 ## Usage
 
 ### Basic Setup
@@ -171,7 +173,7 @@ editor.whenReady().then(() => {
 Formeo can be integrated with popular frontend frameworks:
 
 - **[React Integration Guide](https://github.com/Draggable/formeo/blob/main/docs/react-integration.md)** - Custom hooks, functional components, and Context API patterns
-- **[Angular Integration Guide](https://github.com/Draggable/formeo/blob/main/docs/angular-integration.md)** - Services, components, and standalone patterns
+- **[Angular Integration Guide](https://github.com/Draggable/formeo/blob/main/docs/angular-integration.md)** - A standalone component, SSR-safe setup, and reading submitted answers
 
 ## Theming
 
@@ -214,6 +216,7 @@ Comprehensive documentation is available in the [docs](https://github.com/Dragga
 - **[Actions](https://github.com/Draggable/formeo/blob/main/docs/options/actions/README.md)** - Action handlers
 - **[Editor API](https://github.com/Draggable/formeo/blob/main/docs/editor/README.md)** - Editor methods and properties
 - **[TypeScript](https://github.com/Draggable/formeo/blob/main/docs/typescript.md)** - Shipped type definitions and typed events
+- **[Using a CSS Framework](https://github.com/Draggable/formeo/blob/main/docs/css-frameworks.md)** - Style rendered forms with Bootstrap or any framework
 - **[Build Tools](https://github.com/Draggable/formeo/blob/main/docs/tools/README.md)** - Development and build utilities
 
 ## Development
diff --git a/docs/README.md b/docs/README.md
index 338330f9..198f0c7e 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -124,4 +124,12 @@ Remove the rendered form from the page and stop its pagination (the page navigat
 
 Type definitions ship with the package; this page lists what is typed and how to narrow the before-hook details.
 
+## [Using a CSS Framework](css-frameworks.md)
+
+The rendered markup and its classes, adding framework classes with `className`, and editor theming.
+
+## [Migrating from formBuilder](migrating-from-formbuilder.md)
+
+Batch-converting formBuilder form exports to Formeo's `formData` shape with `formBuilder2Formeo`.
+
 ## [Build Tools](tools/)
diff --git a/docs/angular-integration-example/README.md b/docs/angular-integration-example/README.md
deleted file mode 100644
index 23fe94aa..00000000
--- a/docs/angular-integration-example/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Angular + Formeo Integration Example
-
-This directory holds only this README — there is no runnable Angular project here.
-
-The code samples referenced below (a standalone component, an injectable service, and module/config
-wiring) live inline in `src/demo/js/frameworks/angular.js`, which the demo's "Angular" tab displays and
-syntax-highlights. That file also explains why the demo simulates Angular patterns instead of loading
-the real framework.
-
-For the full picture — the reasoning behind the simulation, and how to build a real Angular project
-against Formeo — see [`docs/angular-integration.md`](../angular-integration.md).
diff --git a/docs/angular-integration.md b/docs/angular-integration.md
index 5357f898..e0b4c4b7 100644
--- a/docs/angular-integration.md
+++ b/docs/angular-integration.md
@@ -1,145 +1,147 @@
-# Angular + Formeo Integration Guide
+# Angular + Formeo Integration
 
-## Why the Demo Doesn't Load Real Angular v20
+A standalone Angular component that builds a form with `FormeoEditor`, previews it with `FormeoRenderer`, and
+cleans up both on destroy. Verified against `formeo` 5.13.1; Angular 17+ syntax (standalone components,
+`afterNextRender`).
 
-The current Angular demo in `src/demo/js/frameworks/angular.js` simulates Angular patterns rather than loading the actual Angular framework for several technical reasons:
-
-### Technical Limitations
-
-1. **Dynamic ES Module Loading Complexity**
-   - Angular v20 requires complex module resolution
-   - Dependencies between @angular/core, @angular/common, @angular/platform-browser
-   - Browser ES module loading limitations
-
-2. **Bundle Size Impact**
-   - Angular v20 with dependencies is ~200KB+ minified
-   - Would significantly slow down demo loading
-   - Not suitable for quick demonstrations
-
-3. **Build Tool Requirements**
-   - Angular typically requires compilation (TypeScript → JavaScript)
-   - Template compilation and bundling
-   - Zone.js and other runtime dependencies
-
-4. **Runtime Environment Mismatch**
-   - Demo runs in vanilla browser environment
-   - Angular expects Node.js tooling ecosystem
-
-## Recommended Alternatives
-
-### Option 1: Complete Angular Project Example (Recommended)
-
-Create a separate Angular project that demonstrates real integration:
+## Install
 
 ```bash
-# Create new Angular project
-ng new formeo-angular-example --routing --style=scss
-cd formeo-angular-example
-
-# Install Formeo
 npm install formeo
-
-# Run development server
-ng serve
 ```
 
-**Benefits:**
-- Real Angular v20 environment
-- Proper TypeScript support
-- Full Angular CLI tooling
-- Production-ready patterns
-
-### Option 2: Improved CDN Loading (Experimental)
-
-Update the demo to use Angular's standalone CDN bundles:
-
-```javascript
-// Load Angular via CDN (Angular v20 standalone)
-async function loadAngularFromCDN() {
-  const scripts = [
-    'https://unpkg.com/@angular/core@20/bundles/core.umd.js',
-    'https://unpkg.com/@angular/common@20/bundles/common.umd.js',
-    'https://unpkg.com/@angular/platform-browser@20/bundles/platform-browser.umd.js'
-  ];
-  
-  for (const src of scripts) {
-    await loadScript(src);
+Add the stylesheet in `angular.json`:
+
+```json
+{
+  "projects": {
+    "my-app": {
+      "architect": {
+        "build": {
+          "options": {
+            "styles": ["node_modules/formeo/dist/formeo.min.css", "src/styles.scss"]
+          }
+        }
+      }
+    }
   }
 }
 ```
 
-**Limitations:**
-- Still complex dependency management
-- Large download size
-- Limited TypeScript support
-- Not recommended for production
+(Or `@import 'formeo/dist/formeo.min.css';` from a global stylesheet instead, if you'd rather not touch
+`angular.json`.)
 
-### Option 3: Web Components Approach
-
-Use Angular Elements to create a web component:
+## The component
 
 ```typescript
-// Create Angular Element
-import { createCustomElement } from '@angular/elements';
-import { FormBuilderComponent } from './form-builder.component';
+import { Component, ElementRef, OnDestroy, ViewChild, afterNextRender } from '@angular/core'
+import { FormeoEditor, FormeoRenderer } from 'formeo'
+
+@Component({
+  selector: 'app-form-builder',
+  standalone: true,
+  template: `
+    <div #editorRef></div>
+    <button type="button" (click)="preview()">Preview</button>
+    <div #previewRef></div>
+  `,
+})
+export class FormBuilderComponent implements OnDestroy {
+  @ViewChild('editorRef', { static: true }) editorRef!: ElementRef<HTMLElement>
+  @ViewChild('previewRef', { static: true }) previewRef!: ElementRef<HTMLElement>
+
+  private editor?: FormeoEditor
+  private renderer?: FormeoRenderer
+
+  constructor() {
+    // afterNextRender only runs in the browser (see "Server-side rendering" below), after the view
+    // holding editorRef/previewRef has rendered.
+    afterNextRender(() => {
+      this.editor = new FormeoEditor({ editorContainer: this.editorRef.nativeElement })
+      this.renderer = new FormeoRenderer({
+        renderContainer: this.previewRef.nativeElement,
+        events: {
+          onSubmit: ({ event, userData }) => {
+            event.preventDefault() // formeo doesn't call this for you
+            console.log('submitted:', userData)
+          },
+        },
+      })
+    })
+  }
+
+  preview(): void {
+    this.renderer?.render(this.editor?.formData)
+  }
 
-const FormBuilderElement = createCustomElement(FormBuilderComponent, { injector });
-customElements.define('formeo-angular-builder', FormBuilderElement);
+  ngOnDestroy(): void {
+    this.editor?.destroy()
+    this.renderer?.destroy()
+  }
+}
 ```
 
-**Benefits:**
-- Can be loaded in any environment
-- Encapsulated Angular functionality
-- Framework-agnostic usage
+Notes:
 
-### Option 4: Stackblitz/CodeSandbox Integration
+- `editorContainer`/`renderContainer` take an `Element` directly, so the `@ViewChild` refs' `.nativeElement`
+  work without a selector string.
+- `editor.formData` is a getter — it always returns the editor's current form definition, so `preview()` just
+  reads it and hands it to `renderer.render()`.
+- `editor.destroy()` and `renderer.destroy()` both exist and are safe to call more than once; call them in
+  `ngOnDestroy` so a routed-away component doesn't leak Sortable instances or DOM listeners.
 
-Embed live Angular examples using online IDEs:
+## Reading submitted answers
 
-```html
-<iframe src="https://stackblitz.com/edit/formeo-angular-v20?embed=1"
-        width="100%" height="600px"></iframe>
-```
+The renderer's `onSubmit` event fires on the rendered `<form>`'s native `submit` event and hands you
+`{ event, form, userData }`, where `userData` is the form's values keyed by field name (repeated names — checkbox
+groups, multi-selects — become arrays). Formeo does not call `event.preventDefault()` itself, so call it yourself
+if you're not doing a normal form POST. This fragment replaces the `onSubmit` handler inside the `FormeoRenderer`
+constructor in the component above, and assumes an injected `HttpClient` (`private http = inject(HttpClient)`,
+alongside `provideHttpClient()` in your app config):
 
-## Current Demo Value
+```typescript
+events: {
+  onSubmit: ({ event, userData }) => {
+    event.preventDefault()
+    this.http.post('/api/submissions', userData).subscribe()
+  },
+}
+```
 
-The current simulated demo is still valuable because it:
+## Server-side rendering (SSR)
 
-1. **Shows Integration Patterns**: Demonstrates proper Angular component structure
-2. **Provides Copy-Paste Code**: Complete, working examples for real projects
-3. **Educational Value**: Teaches Angular + Formeo integration concepts
-4. **Performance**: Loads quickly without framework overhead
+`FormeoEditor` and `FormeoRenderer` both touch `document`, so only construct them in the browser. `afterNextRender`
+(used above) already guarantees this — Angular's server renderer never invokes its callback, so no extra guard is
+needed.
 
-## Implementation Recommendation
+If you're not using `afterNextRender` (e.g. an older Angular version, or constructing Formeo somewhere other than
+a component's injection context), guard the same code with `isPlatformBrowser`. This fragment replaces the
+constructor's `afterNextRender(...)` call in the component above with an `ngAfterViewInit` lifecycle hook instead
+(so the class also needs `implements AfterViewInit`, and the extra imports shown here):
 
-For your use case, I recommend:
+```typescript
+import { AfterViewInit, Component, PLATFORM_ID, inject } from '@angular/core'
+import { isPlatformBrowser } from '@angular/common'
 
-1. **Keep the current demo** for quick pattern demonstration
-2. **Add a complete Angular project** in `/docs/angular-integration-example/`
-3. **Update the demo documentation** to clearly explain the simulation
-4. **Add links to the full project** for developers who want real integration
+export class FormBuilderComponent implements AfterViewInit {
+  private platformId = inject(PLATFORM_ID)
 
-This approach provides both quick learning (demo) and complete implementation (separate project).
+  ngAfterViewInit(): void {
+    if (isPlatformBrowser(this.platformId)) {
+      this.editor = new FormeoEditor({ editorContainer: this.editorRef.nativeElement })
+    }
+  }
+}
+```
 
-## Migration Path
+## TypeScript
 
-If you want to enhance the current demo:
+Formeo ships its own type definitions (`dist/formeo.d.ts`, `dist/formeo.d.cts`) — nothing extra to install or
+declare. See [TypeScript](typescript.md) for what's typed, including the editor and renderer constructors, their
+options, and the `events` callbacks used above.
 
-```javascript
-// Enhanced demo with better Angular simulation
-export async function loadAngularDemo(container) {
-  // 1. Show comprehensive setup instructions
-  // 2. Provide modern Angular v20 code examples
-  // 3. Demonstrate advanced patterns (signals, standalone components)
-  // 4. Include service-based architecture examples
-  // 5. Add TypeScript type definitions
-}
-```
+## The demo's Angular tab
 
-The updated demo now includes:
-- Modern Angular v20 patterns
-- Standalone components
-- Angular signals
-- Service-based architecture
-- Better TypeScript examples
-- Comprehensive integration guide
+The demo (`npm start`, then the Angular tab) shows the same construction pattern hand-rolled against plain DOM,
+without loading Angular itself — see `src/demo/js/frameworks/angular.js`. It's there to demonstrate the pattern
+quickly in the browser, not as a real Angular app; use the component above for that.
diff --git a/docs/controls/README.md b/docs/controls/README.md
index 429dbef2..7690f41e 100644
--- a/docs/controls/README.md
+++ b/docs/controls/README.md
@@ -26,7 +26,8 @@ const inputElement = {
 
 ## [Control Options](https://github.com/Draggable/formeo/tree/main/docs/options/controls)
 
-See [Custom controls](custom-controls.md) for a full editor + renderer example.
+See [Custom controls](custom-controls.md) for a full editor + renderer example, or
+[Rich Text Editors](rich-text-editors.md) for a worked example wiring in CKEditor 5.
 
 ## Control Groups
 
diff --git a/docs/controls/custom-controls.md b/docs/controls/custom-controls.md
index 13c2c02c..e466acb9 100644
--- a/docs/controls/custom-controls.md
+++ b/docs/controls/custom-controls.md
@@ -208,3 +208,4 @@ would throw on.
 - [Custom Attribute Types](custom-attribute-types.md) - Attribute input types for a control's `attrs`
 - [Renderer: Custom Elements](../renderer/renderer.md#advanced-topics) - The renderer's `elements` option
 - [Control sets](#control-sets) - Add several fields at once
+- [Rich Text Editors](rich-text-editors.md) - A full worked example: a CKEditor 5 control
diff --git a/docs/controls/rich-text-editors.md b/docs/controls/rich-text-editors.md
new file mode 100644
index 00000000..f3ba274b
--- /dev/null
+++ b/docs/controls/rich-text-editors.md
@@ -0,0 +1,123 @@
+# Rich Text Editors
+
+A recipe for wiring a modern WYSIWYG editor into Formeo as a custom control, using
+[CKEditor 5](https://ckeditor.com/ckeditor-5/) as the example. It builds on
+[Custom Controls](custom-controls.md) — read that first for the full picture (defining a control, registering it,
+rendering it, and getting its value into `userData`). This page only covers what's specific to a CDN-loaded rich
+text editor: waiting for the script to load before initializing, and syncing the editor's HTML back to the
+`<textarea>` Formeo renders.
+
+The built-in [`TinyMCEControl`](https://github.com/Draggable/formeo/blob/main/src/lib/js/components/controls/html/tinymce.js)
+follows the same `dependencies` + `action.onRender` pattern shown here, against an older TinyMCE CDN build.
+
+## The control
+
+CKEditor 5's CDN build of `ClassicEditor` ships without any plugins built in — you choose which ones to load and
+pass them explicitly, along with the toolbar buttons that use them:
+
+```javascript
+const ckeditorControl = {
+  tag: 'textarea',
+  config: {
+    label: 'Rich text',
+  },
+  meta: {
+    group: 'html',
+    id: 'ckeditor',
+    icon: 'rich-text',
+  },
+  dependencies: {
+    // see CKEditor's install page (link below) for the current version and CDN URL
+    js: 'https://cdn.ckeditor.com/ckeditor5/<version>/ckeditor5.umd.js',
+    css: 'https://cdn.ckeditor.com/ckeditor5/<version>/ckeditor5.css',
+  },
+  action: {
+    onRender: elem => {
+      whenGlobal('CKEDITOR').then(({ ClassicEditor, Essentials, Paragraph, Bold, Italic, Link, List }) => {
+        ClassicEditor.create(elem, {
+          licenseKey: 'YOUR_LICENSE_KEY', // see "License key" below
+          plugins: [Essentials, Paragraph, Bold, Italic, Link, List],
+          toolbar: ['undo', 'redo', '|', 'bold', 'italic', 'link', '|', 'bulletedList', 'numberedList'],
+        }).then(editor => {
+          // keep the source <textarea> (and so renderer.userData / a native form submit) in sync as the user types
+          editor.model.document.on('change:data', () => {
+            editor.updateSourceElement()
+          })
+        })
+      })
+    },
+  },
+}
+```
+
+Register it the same way as any other control, e.g.
+`controls: { elements: [ckeditorControl], elementOrder: { html: ['ckeditor'] } }` when creating the
+`FormeoEditor`. Because it renders on a `tag: 'textarea'` field, the renderer's default `userData` collection
+already picks up its value by name — no hidden input needed, as long as `editor.updateSourceElement()` has run.
+
+## CDN version and URL
+
+Formeo's `dependencies` loader inserts a plain `<script src="...">` (not `type="module"`), which is what CKEditor's
+**Cloud CDN, vanilla JS quick start** targets: it's a UMD bundle that exposes a `window.CKEDITOR` global (with
+`ClassicEditor` and its plugins on it), not an ES module. Get the current version and exact URLs from CKEditor's own
+install page rather than hard-coding them here, since they change over time:
+
+- [CKEditor 5 — Vanilla JS CDN quick start](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/cloud/quick-start.html)
+
+## License key
+
+`ClassicEditor.create()` requires a `licenseKey`. The free `'GPL'` value only works with a **self-hosted** install
+(npm or a downloaded zip) — the **Cloud CDN** build used above always requires a key from a CKEditor account (a free
+tier is available; check CKEditor's [licensing page](https://ckeditor.com/docs/ckeditor5/latest/getting-started/licensing/license-key-and-activation.html)
+for current terms and limits). If you'd rather stay on the free GPL license, self-host the CKEditor files yourself
+and point `dependencies.js`/`dependencies.css` at your own copy instead of the CDN.
+
+## Waiting for the CDN script: `whenGlobal`
+
+The renderer fetches `dependencies` but doesn't wait for them before calling `action.onRender`, so `onRender` can
+run before `ckeditor5.umd.js` has finished loading and `window.CKEDITOR` exists yet. A small helper that polls for
+the global covers this — and works for the editor's field preview too, since a control's own dependencies aren't
+guaranteed to be loaded by the time its `action.onRender` fires there either:
+
+```javascript
+const whenGlobal = (name, { interval = 50, timeout = 15000 } = {}) =>
+  new Promise((resolve, reject) => {
+    const start = Date.now()
+    ;(function check() {
+      if (window[name]) {
+        return resolve(window[name])
+      }
+      if (Date.now() - start > timeout) {
+        return reject(new Error(`${name} did not become available within ${timeout}ms`))
+      }
+      setTimeout(check, interval)
+    })()
+  })
+```
+
+One more timing detail: `action.onRender` itself only fires once the field's node has a `parentElement`
+([`dom.onRender`](../renderer/renderer.md#legacy-configactiononrender)), and gives up silently if that doesn't
+happen within `ANIMATION_SPEED_BASE` (333ms) — not a concern for a normal render, but worth knowing if `onRender`
+never seems to fire.
+
+## Render it
+
+`FormeoRenderer` needs its own copy of `dependencies` and `action`, keyed by `ckeditor` — the control's `meta.id` —
+via the `elements` option, exactly as in [Custom Controls](custom-controls.md#render-it):
+
+```javascript
+const renderer = new FormeoRenderer({
+  renderContainer: '#formeo-renderer',
+  elements: {
+    ckeditor: { action: ckeditorControl.action, dependencies: ckeditorControl.dependencies },
+  },
+})
+
+renderer.render(savedFormData)
+```
+
+## See Also
+
+- [Custom Controls](custom-controls.md) - Defining, registering, and rendering a control end to end
+- [Renderer: Custom Elements](../renderer/renderer.md#advanced-topics) - The renderer's `elements` option
+- [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest/getting-started/index.html)
diff --git a/docs/css-frameworks.md b/docs/css-frameworks.md
new file mode 100644
index 00000000..a3da23b0
--- /dev/null
+++ b/docs/css-frameworks.md
@@ -0,0 +1,158 @@
+# Using a CSS Framework
+
+`FormeoRenderer` renders forms as plain HTML, but Formeo also ships its own stylesheet
+(`dist/formeo.min.css`) that targets that markup — `.formeo input`, `.formeo select`, `.formeo textarea` and
+`.formeo button` rules, plus the flex/float rules that lay rows and columns out side by side. Whether that
+stylesheet is on the page or not changes how a framework like Bootstrap interacts with the rendered form, so this
+guide covers both: what the rendered markup looks like, what `formeo.min.css` does to it if it's loaded, and how
+to combine it with a framework either way.
+
+## The rendered markup
+
+This is what `FormeoRenderer` actually produces for a form with a text field, a required checkbox group, a radio
+group and a select, trimmed to the structural elements and their classes:
+
+```html
+<form class="formeo-render formeo formeo-rendered-0" id="f-my-form">
+  <div class="formeo-stage" id="stage-1" data-stage-id="stage-1">
+    <div class="formeo-row-wrap">
+      <div id="f-row-1">
+        <div style="width: 50%;" id="f-col-1">
+          <!-- one wrapper per field, see below -->
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+```
+
+- **Form:** `formeo-render formeo formeo-rendered-N` — `N` is how many `.formeo-render` forms were already on the
+  page when this one rendered (0 for the first).
+- **Stage:** `formeo-stage`.
+- **Row:** a form built in the editor saves `className: ['formeo-row']` on every row, so an editor-built form's
+  row elements render with that class. Hand-written or converted `formData` that doesn't set `className` won't
+  have it, and the row is just an unclassed element wrapped in a div with `formeo-row-wrap`.
+- **Column:** same as rows — editor-built columns carry `className: ['formeo-column']`; hand-written data may not.
+  Either way its width comes from an inline `style="width: ...%"` (from the column's `config.width`, `100%` if
+  unset).
+- **Checkbox/radio options:** each option is wrapped in a div with a fixed `f-checkbox` or `f-radio` class.
+- **Required mark:** the `*` next to a label is a `<span class="text-error">`.
+- **Tooltip:** `<span class="f-tooltip" data-tooltip="...">`.
+- **Help text:** `<small class="f-help-text">`.
+
+None of these are Bootstrap's (or another framework's) own class names, so a framework's CSS never directly
+targets Formeo's rendered markup. What *does* touch it is Formeo's own stylesheet, if it's on the page — see the
+next section — plus whatever classes you add yourself via `className` (see [below](#adding-framework-classes-with-classname)).
+
+## Does formeo.min.css apply to the rendered form?
+
+Only if it's on the page. `FormeoRenderer` never loads a stylesheet itself — it just renders HTML. `formeo.min.css`
+ends up on the page one of two ways:
+
+- You import it yourself, the same way the [renderer guide's own example](renderer/renderer.md#installation) or the
+  root README's CDN `<link>` does.
+- The *editor*'s default `style` option loads it (see [Options](options/README.md)) — so if you're previewing a
+  rendered form next to a live `FormeoEditor` on the same page, it's already there.
+
+If neither applies — no editor on the page, and you didn't import the CSS — the rendered form is unstyled HTML and
+a framework's own classes and defaults are all that touch it.
+
+## What formeo.min.css does if it's loaded
+
+`formeo.min.css` is one stylesheet that covers both the editor's UI and rendered forms; the rules that affect a
+rendered form are scoped under `.formeo.formeo-render`, plus a few bare-element rules scoped only to `.formeo`:
+
+- `.formeo input`, `.formeo select`, `.formeo textarea`, `.formeo button` set width, padding, border-radius, etc.
+  These have specificity `(0,1,1)` — one class, one element — which beats a framework class alone, like
+  Bootstrap's `.form-control` or `.btn-primary` at `(0,1,0)`, when both land on the same `<input>`. In practice
+  this means loading `formeo.min.css` *after* Bootstrap can still leave inputs looking like Formeo's defaults
+  instead of Bootstrap's.
+- `.formeo.formeo-render .formeo-row { display: flex; ... }` and `.formeo.formeo-render .formeo-column {
+  float: left; ... }` are what lay a row's columns out side by side. These only apply where the `formeo-row`/
+  `formeo-column` classes exist — see the note above about editor-built vs. hand-written `formData`.
+
+You have two reasonable options:
+
+**Load `formeo.min.css` and override what you need.** Because Formeo's element rules have specificity `(0,1,1)`,
+a plain framework class won't beat them — write your override against `.formeo`, or your framework's own scoped
+selector, so it wins on specificity too:
+
+```css
+/* Restore Bootstrap's input styling over Formeo's defaults */
+.formeo.formeo-render .form-control {
+  border: 1px solid #ced4da;
+  border-radius: 0.375rem;
+  padding: 0.375rem 0.75rem;
+}
+```
+
+**Or don't load `formeo.min.css` at all**, and write your own row/column layout instead — the rendered markup
+above still gives you `.formeo-row`/`.formeo-column` (on editor-built data) or plain wrapper elements to target:
+
+```css
+.formeo-row {
+  display: flex;
+  gap: 1rem;
+}
+.formeo-column {
+  flex: 1;
+}
+```
+
+Either way, the fields themselves (inputs, selects, labels) are unstyled by Formeo if you skip the stylesheet, so
+a framework's own form classes apply cleanly.
+
+## Adding framework classes with `className`
+
+Any field's `attrs.className` becomes a class on its rendered element — set it as a default in a custom control, or
+per-field in the editor:
+
+```javascript
+// as a default on a custom control (see Custom Controls: https://github.com/Draggable/formeo/blob/main/docs/controls/custom-controls.md)
+attrs: {
+  className: 'form-control', // Bootstrap's input class
+}
+```
+
+**Radio and checkbox groups are a special case.** `className` on a group's `attrs` lands on the group's own wrapper
+elements (the div the group's label and options are wrapped in) — it does **not** reach each individual option; every
+option keeps the fixed `f-checkbox`/`f-radio` wrap regardless of `className` (`processOptions` in
+`src/lib/js/common/dom.js`). If your framework needs a per-option class (Bootstrap's `form-check`, for example),
+target `.f-checkbox`/`.f-radio` directly in your own CSS rather than relying on `className`.
+
+## Framework dependencies only some controls need
+
+If only one control needs a framework's CSS/JS (a date picker, a rich text editor), don't load it for the whole
+page — give that control its own `dependencies: { js, css }`, fetched once and deduped by URL the first time the
+control is used. See [Custom Controls](controls/custom-controls.md) and, for a full worked example,
+[Rich Text Editors](controls/rich-text-editors.md).
+
+## Editor theming
+
+The editor UI itself (not the rendered form) is styled with `--formeo-*` CSS custom properties, so you can restyle
+it — dark mode, brand colors — without fighting a framework's own resets. See the root README's
+[Theming](https://github.com/Draggable/formeo/blob/main/README.md#theming) section for the full list of properties
+and how to override them.
+
+## Skip the editor's automatic stylesheet load
+
+The editor loads `formeo.min.css` automatically by default (the `style` option, documented in
+[Options](options/README.md)); set it to `null` to skip that automatic load, e.g. if you're building the editor's
+chrome entirely with your own framework-based styles:
+
+```javascript
+new FormeoEditor({
+  editorContainer: '#formeo-editor',
+  style: null,
+})
+```
+
+This only stops the *editor's* automatic load. `FormeoRenderer` never loads a stylesheet automatically either way
+— see [Does formeo.min.css apply to the rendered form?](#does-formeomincss-apply-to-the-rendered-form) above for
+how it ends up on the page (or doesn't) when you're using the renderer on its own.
+
+## See Also
+
+- [Custom Controls](controls/custom-controls.md) - `dependencies`, `attrs`, and the control object shape
+- [Options](options/README.md) - The editor's `style` option
+- [README: Theming](https://github.com/Draggable/formeo/blob/main/README.md#theming) - `--formeo-*` custom properties
diff --git a/docs/migrating-from-formbuilder.md b/docs/migrating-from-formbuilder.md
new file mode 100644
index 00000000..d40c7ce6
--- /dev/null
+++ b/docs/migrating-from-formbuilder.md
@@ -0,0 +1,204 @@
+# Migrating from formBuilder
+
+[Formeo is not formBuilder](controls/custom-controls.md#formeo-is-not-formbuilder) — separate projects with different
+form-data shapes. If you have existing [formBuilder](https://formbuilder.online/) form exports and want to move them
+into Formeo, [`Draggable/formBuilder2Formeo`](https://github.com/Draggable/formBuilder2Formeo) converts formBuilder's
+JSON (or XML) into a Formeo `formData` object, and this page walks through running it in bulk over a directory of
+exports.
+
+## The converter
+
+`formBuilder2Formeo` isn't published to npm, so clone it and install its dependencies:
+
+```sh
+gh repo clone Draggable/formBuilder2Formeo
+cd formBuilder2Formeo
+npm install lodash uuid@3
+```
+
+Its entry point is `src/convert-data.js`, which exports a single function:
+
+```javascript
+convertData(jsonOrXmlString) // -> a Formeo formData object
+```
+
+A few things to know before running it:
+
+- It imports `uuid` v3's default export and `lodash/set` / `lodash/startCase` without file extensions, which plain
+  Node ESM (`node --experimental-*`) can't resolve. A runner such as [`tsx`](https://github.com/privatenumber/tsx)
+  can, and is what the batch script below uses (via `npx tsx`).
+- Under `tsx`, the module's CJS/ESM interop ends up double-wrapping its default export (`{ default: { default:
+  convertData } }` instead of `{ default: convertData }`), so unwrap it defensively — see the script below.
+- If the input string starts with `<form-template>`, `convertData` parses it as XML through a `DOMParser`-based
+  `parseXML`, which is browser-only and throws under plain Node. See [XML input](#xml-input) for two ways around
+  that.
+
+## The batch script
+
+This script reads every `*.json` file from an input directory, converts each one, post-processes the result (see
+[below](#post-processing-and-why)), and writes `<name>.formeo.json` to an output directory. Save it next to (or one
+level above) your `formBuilder2Formeo` checkout as `batch-convert.mjs`, adjusting the import path if your layout
+differs:
+
+```javascript
+// batch-convert.mjs
+//
+// Usage:
+//   npx tsx batch-convert.mjs <inputDir> <outputDir>
+//
+// Requires a checkout of Draggable/formBuilder2Formeo with its dependencies installed
+// (`npm install lodash uuid@3` inside that checkout) — see docs/migrating-from-formbuilder.md.
+import { readFileSync, readdirSync, writeFileSync } from 'node:fs'
+import { basename, join } from 'node:path'
+// Adjust this path to your formBuilder2Formeo checkout.
+// tsx's CJS interop double-wraps this module's default export, so unwrap it defensively.
+import convertDataModule from './formBuilder2Formeo/src/convert-data.js'
+const convertData = convertDataModule.default || convertDataModule
+
+// Maps each formBuilder field type to its Formeo equivalent: `attrsType` (Formeo's
+// `attrs.type`, where the renderer needs one) and `controlId` (so the editor recognises
+// each field's control, offers its option list in the Conditions panel, and applies its
+// locked/disabled attributes).
+const formeoControlByFormBuilderType = {
+  hidden: { controlId: 'hidden', attrsType: 'hidden' },
+  'radio-group': { controlId: 'radio', attrsType: 'radio' },
+  'checkbox-group': { controlId: 'checkbox', attrsType: 'checkbox' },
+  date: { controlId: 'date-input', attrsType: 'date' },
+  number: { controlId: 'number', attrsType: 'number' },
+  file: { controlId: 'upload', attrsType: 'file' },
+  text: { controlId: 'text-input', attrsType: 'text' },
+  select: { controlId: 'select' }, // tag is already 'select'; not gated by attrs.type
+  textarea: { controlId: 'textarea' },
+  button: { controlId: 'button' },
+  header: { controlId: 'html.header' },
+  paragraph: { controlId: 'paragraph' },
+  // Any formBuilder type not listed here (a custom formBuilder field plugin, e.g.
+  // "starRating") has no built-in Formeo control: it's left as-is, and needs either a
+  // custom Formeo control (see controls/custom-controls.md) or manual cleanup.
+}
+
+function postProcess(formeoData) {
+  for (const field of Object.values(formeoData.fields)) {
+    const mapping = formeoControlByFormBuilderType[field.meta?.id]
+    if (!mapping) continue
+    if (mapping.attrsType) {
+      field.attrs = { ...field.attrs, type: mapping.attrsType }
+    }
+    // so the editor recognises each field's control
+    field.meta = { ...field.meta, id: mapping.controlId }
+    field.config = { ...field.config, controlId: mapping.controlId }
+  }
+  // Columns from formBuilder2Formeo have no `config` at all. Formeo >=5.9.3 (#212) defaults
+  // that on render, but set it explicitly for older versions too.
+  for (const column of Object.values(formeoData.columns)) {
+    column.config = column.config || {}
+  }
+  return formeoData
+}
+
+const [inputDir, outputDir] = process.argv.slice(2)
+
+for (const file of readdirSync(inputDir)) {
+  if (!file.endsWith('.json')) continue
+  const text = readFileSync(join(inputDir, file), 'utf8')
+  const converted = postProcess(convertData(text))
+  const outFile = join(outputDir, `${basename(file, '.json')}.formeo.json`)
+  writeFileSync(outFile, JSON.stringify(converted, null, 2))
+  console.log(`${file} -> ${outFile}`)
+}
+```
+
+Run it against a directory of formBuilder JSON exports:
+
+```sh
+npx tsx batch-convert.mjs ./input ./output
+```
+
+which, run against two sample exports, produced:
+
+```
+form-1.json -> output/form-1.formeo.json
+form-2.json -> output/form-2.formeo.json
+```
+
+Each `output/*.formeo.json` file is a Formeo `formData` object — hand it to `new FormeoEditor(options, formData)` or
+`new FormeoRenderer(options, formData)` as-is.
+
+## Post-processing and why
+
+`convertData`'s output is close to Formeo's shape but not quite ready to use, in the editor or the renderer:
+
+- **Fields keep formBuilder's control id, not Formeo's.** formBuilder's field `type` (`hidden`, `radio-group`,
+  `checkbox-group`, `date`, `number`, `file`, `text`, `select`, `textarea`, `button`, `header`, `paragraph`, …)
+  lands verbatim in each converted field's `meta.id`, but that's formBuilder's own control naming, not Formeo's.
+  Formeo's built-in controls (`src/lib/js/components/controls/form/*.js` and `.../html/*.js`) register under their
+  own `meta.id`, and several parts of Formeo look a field's control up by that id:
+
+  - The renderer and Formeo's controls key rendering off `attrs.type`, not `meta.id` — for example the renderer
+    only treats a field as an option group when `attrs.type` is `'checkbox'` or `'radio'`. Left unset, a converted
+    hidden field renders as a plain text input, and a converted radio or checkbox group renders as one bare input
+    instead of a group.
+  - The editor's `Field#applyControlAttrConfig` looks up the registered control by `config.controlId` (falling
+    back to `meta.id`) to read that control's `disabledAttrs`/`lockedAttrs` — for the built-in radio and checkbox
+    controls, `disabledAttrs: ['type']`. If the id doesn't match a registered control, that lookup finds nothing.
+  - `Field#isCheckable`, which the Conditions panel's autocomplete uses to decide whether to offer a field's
+    option list, checks `config.controlId` against exactly `'radio'` or `'checkbox'` — formBuilder's
+    `'radio-group'`/`'checkbox-group'` don't match, so a converted group's options silently don't show up as
+    condition targets.
+
+  The script above fixes both at once — `attrs.type` for the fields the renderer or a control gates on it, and
+  `meta.id`/`config.controlId` for Formeo's own control id, read from each control's source file:
+
+  | formBuilder `meta.id` | Formeo `attrs.type` | Formeo control id (`meta.id`/`config.controlId`) |
+  | ---------------------- | -------------------- | -------------------------------------------------- |
+  | `hidden`                | `hidden`              | `hidden`                                             |
+  | `radio-group`           | `radio`               | `radio`                                              |
+  | `checkbox-group`        | `checkbox`            | `checkbox`                                           |
+  | `date`                  | `date`                | `date-input`                                         |
+  | `number`                | `number`              | `number`                                             |
+  | `file`                  | `file`                | `upload`                                             |
+  | `text`                  | `text`                | `text-input`                                         |
+  | `select`                | _(unchanged)_          | `select`                                             |
+  | `textarea`              | _(unchanged)_          | `textarea`                                           |
+  | `button`                | _(unchanged)_          | `button`                                             |
+  | `header`                | _(unchanged)_          | `html.header`                                        |
+  | `paragraph`             | _(unchanged)_          | `paragraph`                                          |
+
+  A formBuilder type outside this table — a custom formBuilder field plugin, such as the sample data's
+  `starRating` field — has no built-in Formeo control, so it's left as-is; give it a
+  [custom control](controls/custom-controls.md) or handle it by hand.
+
+- **Columns carry no `config` at all.** Formeo 5.9.3 fixed the renderer to default missing row/column config (see
+  the CHANGELOG entry closing [#212](https://github.com/Draggable/formeo/issues/212)), so this step is only needed
+  for older Formeo versions — but setting `config: {}` explicitly is harmless either way, so the script always does
+  it.
+
+With this post-processing applied, a converted, post-processed form behaves like a native Formeo one in both
+places that matter:
+
+- **Rendered with `FormeoRenderer`:** the radio group renders three `<input type="radio">` elements, the checkbox
+  group renders one `<input type="checkbox">`, and the hidden field renders as `<input type="hidden">`.
+- **Loaded in the editor:** the converted radio and checkbox group fields show up in the Conditions panel's option
+  list, and their `type` attribute stays disabled in the edit panel, the same as a radio/checkbox group built in
+  the editor itself. Skipping the `controlId`/`meta.id` remap (leaving formBuilder's own `'radio-group'` id in
+  place) is what causes those fields to silently disappear from Conditions' option list.
+
+## XML input
+
+formBuilder can also export XML (`<form-template>...</form-template>`), which `convertData` parses through a
+`DOMParser`-based `parseXML` — browser-only, so it throws under plain Node. Two ways to still batch-convert XML
+exports:
+
+1. **Convert to JSON in formBuilder first.** formBuilder's own "Get Data" / export options can produce JSON
+   directly; feed that JSON straight into the batch script above.
+2. **Provide a `DOMParser`.** Install a DOM implementation such as [`jsdom`](https://github.com/jsdom/jsdom) and set
+   a global `window.DOMParser` (for example `global.window = new JSDOM('').window`) before calling `convertData`
+   with the XML string.
+
+## Check your forms
+
+Batch conversion (even with the post-processing above) is a starting point, not a guarantee — field types outside
+the mapping table, custom formBuilder plugins, and layout details won't necessarily come through cleanly. After
+converting, open each form in the Formeo editor and save it: that's the fastest way to confirm a form actually
+looks and behaves the way you expect, and re-saving from the editor also canonicalizes the data to whatever shape
+your installed Formeo version currently expects.
diff --git a/docs/options/controls/README.md b/docs/options/controls/README.md
index f6f01b10..60dadc24 100644
--- a/docs/options/controls/README.md
+++ b/docs/options/controls/README.md
@@ -11,6 +11,7 @@ Control options can be used to disable, extend and modify the Formeo's control p
 | [groups](#groups)             | Array   | define custom [control groups](../../controls/#control-groups) beyond the default 3 | [see below](#groups)                         | `[]`                           |
 | [groupOrder](#grouporder)     | Array   | set order of [control groups](../../controls/#control-groups)                       | `['html', 'layout']`                         | `['common', 'html', 'layout']` |
 | [ghostPreview](#ghostpreview) | Boolean | use a live preview of the control when dragging                                     | `true`                                       | `false`                        |
+| [panels](#panels)             | Object  | how the control groups are shown: `'slider'` (arrows), `'tabbed'` or `'auto'`       | `{ displayType: 'tabbed' }`                  | `{ displayType: 'slider' }`    |
 
 ## sortable
 
@@ -153,6 +154,32 @@ const formeoOptions = {
 const formeo = new FormeoEditor(formeoOptions)
 ```
 
+## panels
+
+Control how the control groups (layout, common, html, ...) are shown in the control panel.
+
+```javascript
+const controlOptions = {
+  panels: { displayType: 'tabbed' },
+}
+
+const formeoOptions = {
+  controls: controlOptions,
+}
+
+const formeo = new FormeoEditor(formeoOptions)
+```
+
+`displayType` accepts:
+
+- `'slider'` (default) - one group is shown at a time, with next/previous arrows to page through the rest.
+- `'tabbed'` - every group's label is shown as a tab, and clicking a tab switches to it.
+- `'auto'` - switches between `'tabbed'` and `'slider'` based on the control panel's width, using a `390px` breakpoint (`'tabbed'` above it, `'slider'` at or below it). It's re-evaluated whenever the panel is resized.
+
+Any other value is treated as `'slider'`.
+
+This only affects the control panel's groups. Field edit panels (the per-field property editor) always use `'auto'` and aren't configurable.
+
 ## ghostPreview
 
 Show a live preview of the field instead of the control button while a control is being dragged onto the stage.
diff --git a/docs/renderer/renderer.md b/docs/renderer/renderer.md
index 6c2c9d96..a9826220 100644
--- a/docs/renderer/renderer.md
+++ b/docs/renderer/renderer.md
@@ -17,10 +17,35 @@ The `FormeoRenderer` class is responsible for rendering Formeo form data into in
 
 ## Installation
 
+Formeo ships ESM, CommonJS and UMD builds. Pick the one that matches how you load it.
+
+### ESM
+
 ```javascript
 import { FormeoRenderer } from 'formeo'
+import 'formeo/dist/formeo.min.css'
+```
+
+### CommonJS
+
+```javascript
+const { FormeoRenderer } = require('formeo')
 ```
 
+This works in Node from the release that ships the `.cjs` build (5.9.1+). Formeo renders in a browser, so in Node this is for bundlers and SSR imports, not for calling `render()` server-side.
+
+### UMD (CDN, no build step)
+
+```html
+<script
+  src="https://unpkg.com/formeo@5.13.1/dist/formeo.umd.js"
+  integrity="sha384-REPLACE_WITH_THE_HASH_FOR_THE_PINNED_VERSION"
+  crossorigin="anonymous"
+></script>
+```
+
+Pin a version instead of `@latest` so the hash stays valid, and add the matching `integrity` hash (shown on unpkg's file listing for that version) with `crossorigin="anonymous"`. This exposes `window.FormeoRenderer` (and `window.FormeoEditor`) globally.
+
 ## Basic Usage
 
 ```javascript
diff --git a/src/demo/js/frameworks/angular.js b/src/demo/js/frameworks/angular.js
index fccff281..b7652a52 100644
--- a/src/demo/js/frameworks/angular.js
+++ b/src/demo/js/frameworks/angular.js
@@ -6,8 +6,7 @@ import { editorOptions, renderOptions } from '../options/index.js'
  *
  * Note: This demo simulates Angular patterns rather than loading the full framework
  * due to browser compatibility and performance considerations. For a real Angular
- * integration, see the complete Angular project example in /docs/angular-integration-example/
- * Full integration to come in codesandbox.io/angular example in future.
+ * integration, see docs/angular-integration.md.
  */
 export async function loadAngularDemo(container) {
   // Show loading state while demo initializes
@@ -38,8 +37,8 @@ export async function loadAngularDemo(container) {
         <div class="demo-description">
           <p>This demo shows how to integrate Formeo with Angular applications using modern patterns.</p>
           <div class="notice">
-            <strong>Note:</strong> This is a pattern demonstration. For a complete Angular v20 project with Formeo, 
-            see <code>/docs/angular-integration-example/</code> in the repository.
+            <strong>Note:</strong> This is a pattern demonstration. For a complete Angular integration guide,
+            see <code>docs/angular-integration.md</code> in the repository.
           </div>
         </div>
 
@@ -715,7 +714,7 @@ export class FormeoService {
   loadForm(containerId: string, formData: any): void {
     const editor = this.getEditor(containerId);
     if (editor && formData) {
-      editor.render(formData);
+      editor.load(formData);
       this.updateFormData(formData);
     }
   }