---
title: Create the editor
description: Render the root, content surface, toolbars, and a complete default action set.
order: 10
toc:
  - id: styles
    title: Styles
  - id: editor-structure
    title: Editor structure
  - id: presets
    title: Presets
---

## Styles {#styles}

Import the editor stylesheet once in the application:

```ts
import "@workspace/lexical/globals.css"
```

## Editor structure {#editor-structure}

```tsx
import {
  LexicalActions,
  LexicalBubbleToolbar,
  LexicalContent,
  LexicalFixedToolbar,
  LexicalFooter,
  LexicalRoot,
} from "@workspace/lexical"

;<LexicalRoot value="" onChange={setHtml}>
  <LexicalActions useDefaults="full" />
  <LexicalFixedToolbar />
  <LexicalContent placeholder="Start writing…" />
  <LexicalBubbleToolbar />
  <LexicalFooter />
</LexicalRoot>
```

Toolbars and the footer render no DOM when their region has no actions and no custom children.

## Presets {#presets}

Choose `minimal` for basic text editing or `full` for the complete built-in feature set. Preset mode intentionally does not accept manual action children.