Edit your Nuxt Content website with our editors

Nuxt Studio offers a versatile workspace for both developers and content writers, giving them the freedom to choose between two distinct editors for content creation and management: the Markdown editor and the Visual editor.

Each editor serves its own purpose—some users are used to Markdown edition, while others prefer a non-technical, visual approach.

At the end, Markdown syntax is the final output for both editors.

Markdown editor

The Markdown editor in Nuxt Studio provides full control over your content, allowing you to write directly in MDC (an empowered Markdown syntax). This syntax enables integration of Vue components directly into your Markdown files, offering more flexibility to structure your pages.

When your file is saved with the Markdown editor, the content is stored exactly as you've written it, preserving all specific syntax and formatting. This editor is ideal for users comfortable with Markdown who want precise control over the layout and structure of their content.

Visual editor

The Studio editor is heavily inspired by Notion, well known for its intuitive design and flexibility.

Much like a standard text editor, the Studio editor is designed to be familiar and easy to use.

However, it stands out with its additional features that improve the writing experience:

Toolbar

Highlight your text to reveal the toolbar, giving you access to all the standard text editing features:

• Title formatting
• Bold
• Italic
• Strike-through
• Code
• Link
• Class
• Bullet list
• Numerated list

The / shortcut

Simply type / anywhere in the editor to access all Studio features.

Formatting features

• Title formatting
• Line break
• Horizontal rule
• Code-block
• Paragraph
• Bold & italic

Components

One of Studio's standout features is its ability to integrate and customize any complex component directly within the editor.

In other terms, a developer can create any kind of visually complex components and editors will be able to use them and focus on the content. An editor can also tweak the component properties, styles, and behavior to fit its specific requirements as long as the developer made it customizable.

Just type / to access the list of all the components available.

Images

Using the /shortcut, you can quickly insert an image by selecting the Image option. A modal will open to let you choose the media you want to insert.

From the media modal, you can set the alt attribute for SEO and accessibility purpose.

Videos

Using the / shortcut, you can quickly insert a video by selecting the Video choice and filling up the Video URL.

As soon as a video is added, a tab will automatically open with all the props field available by default, for you to fill out the URL and customize your media.