# EditorialEngine

> Live magazine layout: multi-column text flowing around draggable orbs with zero DOM reads, powered by pretext.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Text & Typography
- Tags: text, layout, magazine, columns, pretext, interactive, typography
- Docs: https://fancy-ui.rama.app/docs/components/editorial-engine
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/editorial-engine

## Import

```svelte
<script lang="ts">
  import { EditorialEngine } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { EditorialEngine } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `headline` | `string` | `built-in copy` | Auto-sized headline (largest font size that breaks no word) |
| `body` | `string` | `built-in copy` | Body text, paragraphs separated by blank lines |
| `pullquotes` | `string[]` | `built-in quotes` | Up to two pullquotes embedded in the columns |
| `fontFamily` | `string` | `Palatino serif stack` | Font family stack used for all text |
| `class` | `string` | — | Additional CSS classes for the stage |

## Examples

### Basic Usage

Drag the orbs, click to pause them, resize the window.

```svelte
<script lang="ts">
	import { EditorialEngine } from "fancy-ui-svelte";
</script>

<div class="h-[600px] w-full overflow-hidden rounded-lg border">
	<EditorialEngine />
</div>
<p class="text-muted-foreground mt-3 text-xs">
	Drag an orb — text reflows around it every frame. Click an orb to pause its drift.
</p>
```