Web Editor
Introduction
The Nuxt Studio web editor is a browser-based visual interface for creating, editing, and reviewing your documentation. It provides a preview experience while keeping your work in sync with your Git repository.
Web Editor vs. CLI
The web editor of Nuxt Studio allows you to manage your documentation entirely from your browser. There is no need for local development tools or terminal commands. It’s ideal for maintaining your docs in one centralised place, with an easy tool without any Markdown skills required.
The CLI (Command Line Interface), on the other hand, is a local tool designed for developers who prefer working in their own IDE.
Two distinct 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.
You can select your favorite editor from the settings page of your project.
Markdown editor
The Markdown editor in Nuxt Studio provides full control over your content, allowing you to write directly you documentation in Markdown and integrate Vue components with the MDC syntax.
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 Nuxt 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 provided by the Markdown syntax:
- 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, all Nuxt UI components are usable and can be integrated directly from the editor. An editor can also tweak the component properties, slots and styles.
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.
Live Preview
Once your documentation is deployed, it provides a live preview feature that lets you instantly see updates to your project.
We're using your production website to override contents and display the new visual. This is why we need the URL to be set in the deploy section.
When you are editing your website with Studio, the live preview can be displayed on the right part of your screen. You get an instant feedback when typing. It syncs the preview based on your draft updates.
Making Changes
To edit your documentation:
- Browse files using the file explorer.
- Open a file by clicking on it.
- Edit content in either visual or Markdown mode. All edits are automatically saved as drafts.
- Preview your changes to see how they’ll appear when published.
Publishing Changes
When you’re ready to publish:
- Click the Publish button in the top-right corner of the editor.
- Your changes will be pushed directly to your deployment branch and go live immediately.