Edit pages visually

The docs layer has a visual editor for the body of a page. You see the page as your readers see it. You click a block, and you change it. You do not need to know Markdown.

The three areas

The editor has three areas.

• Blocks, at the left. It lists the blocks of the page: texts, notes, cards, code, and more. A card group shows its cards inside it. Point at a block to show its drag handle and its menu. Drag the handle to move the block. Use the Add button to add a block. A card group has its own Add card button under its cards.
• Preview, in the middle. It shows the page with the theme of your site. Click a block to select it. A box shows which block you picked.
• Block, at the right. It shows the controls of the selected block. A text block has a text box with a toolbar. A note has its text and an icon. A card has a title, an icon, a link, and its text. The Page tab has the title, the description, the path, the navigation, and the SEO fields.

On a small screen, the preview fills the screen. The Blocks button and the block controls open as panels.

Change a page

Add a block

Press Add above the list. The palette opens. Search for a block, or pick one from a group: Text, Callouts, Layout, Code, Landing page, and Site. Each block has an icon and a short description. The new block has sample content, and it is selected, so you can change it at once.

When a card group is selected, Add Card puts a new card inside it.

Keyboard

The Markdown mode

Use the Markdown button at the bottom of the list to edit the page as text. The Markdown mode has an Insert menu of snippets. The editor remembers your last mode. The Edit as Markdown button of the Block panel opens the Markdown of one block.

Some Markdown stays as Markdown in the visual editor, because a block cannot show it safely. A table, HTML, and a text with an inline component are Markdown blocks. You can edit them in a box. Nothing is lost.

Add the preview to your site

The editor shows the page /_pluto/preview in a frame. The layer adds this page and its route rules. Your site must skip its header, footer and search on this route. In app.vue:

<script setup lang="ts">
const route = useRoute()
const isAdmin = computed(() => route.path === '/admin' || route.path.startsWith('/admin/'))
// The preview page shows only the content.
const isPreview = computed(() => isPlutoPreviewPath(route.path))
</script>

<template>
  <PlutoRoot>
    <NuxtPage v-if="isAdmin || isPreview" />

    <AppShell v-else>
      <NuxtPage />
    </AppShell>
  </PlutoRoot>
</template>

isPlutoPreviewPath comes from @plutocms/core. The preview page hides the admin bar by itself.

By default, the preview is a generic page with the title, the description, and the blocks. To use the real layout of your pages, add app/components/PlutoContentPreview.vue to your app. It gets a frontmatter prop and renders the default slot where the blocks go.

Add your own components

The editor knows the Nuxt UI prose components and the page components. A component of your site shows in the palette when it calls definePlutoBlock. The settings come from its TypeScript types. See Author components for the editor.

Related

• docs layer
• Author components for the editor
• Add a field widget