Skip to content
Open
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,86 +1,83 @@
---
title: Visual Editor
description: Edit your docs visually, no code required
title: Fern Editor
description: Update your docs visually with a GitHub-backed workflow that creates PRs.
slug: /docs/content/fern-editor
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you put slugs in docs.yml instead of frontmatter for consistency?

- page: Endpoint Request Snippet
path: ./pages/component-library/default-components/endpoint-request-snippet.mdx
icon: fa-duotone fa-arrow-up
slug: request-snippet

---

<Note>
The Visual Editor is in development. Interested in early access? Reach out via Slack or [email protected].
</Note>

The Fern Visual Editor lets you modify your documentation without touching code. Make changes directly in your browser while maintaining your Git-based workflow.
Fern Editor lets you modify your documentation without touching code. Make changes directly in your browser while maintaining your Git-based workflow.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

modify seems like small changes. How about:

Fern Editor brings a Notion-like editing experience to your documentation site. Write, edit, and publish directly in the browser—no need to open a code editor or learn markdown. The result is faster authoring, easier contributions for non-technical teammates, and a best-in-class visual editing experience powered by TipTap.


<Frame
caption="Edit your docs visually with our WYSIWYG editor"
caption="Edit your docs visually with Fern Editor"
background="subtle"
>
<img src="./visual-editor.png" />
</Frame>

## Try Fern Editor

<div className="action-buttons">
<Button intent="primary" href="https://dashboard.buildwithfern.com/" rightIcon="arrow-right">
Open Dashboard
</Button>
</div>

After logging in, connect your GitHub account. Then open Fern Editor from the Docs settings.it
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Feels like an incomplete thought.


## Key Features

### No-Code Editing
Edit your documentation directly in the browser - no GitHub knowledge required. Every change you make is automatically synced.

### Component Library
You can directly edit or use the slash (`/`) menu to add Fern components to your documentation.

<Tabs>
<Tab title="Layout Components">
<Card>
- [Tabs](/learn/docs/content/components/tabs) for organizing related content
- [Accordion](/learn/docs/content/components/accordions) for expandable sections
- [AccordionGroup](/learn/docs/content/components/accordion-groups) for grouped expandable content
- [Card](/learn/docs/content/components/cards) for highlighting information
- [Frame](/learn/docs/content/components/frames) for images and examples
- [Steps](/learn/docs/content/components/steps) for sequential instructions
</Card>
</Tab>

<Tab title="Content Components">
<Card>
- [Note](/learn/docs/content/components/callouts) for important callouts
- [Warning](/learn/docs/content/components/callouts) for critical information
- [Tip](/learn/docs/content/components/callouts) for helpful suggestions
- [Info](/learn/docs/content/components/callouts) for additional context
- [Code Groups](/learn/docs/content/components/code-blocks) for related code examples
- [Code Blocks](/learn/docs/content/components/code-blocks) for code snippets
- [Embed](/learn/docs/content/components/embed) for external content
</Card>
</Tab>

<Tab title="API Components">
<Card>
- [Parameter Fields](/learn/docs/content/components/paramfield) for parameter details
- [Endpoint Request Snippet](/learn/docs/content/components/request-snippet) for request documentation
- [Endpoint Response Snippet](/learn/docs/content/components/response-snippet) for response documentation
</Card>
</Tab>
</Tabs>

## Getting Started

<Steps>
<Step title="Access the Editor">
Navigate to your Fern Dashboard (_coming soon_) and click the "Edit docs site" button in the top navigation bar.
</Step>

<Step title="Make Changes">
- Select text to format it or add links
- Use the `/` menu to add Fern components
- Preview your changes in real-time
- Add images and media
</Step>

<Step title="Submit Changes">
Your changes are automatically saved as drafts. When ready:
1. Review your changes
2. Add a description of your updates
3. Click "Publish" to create a pull request in Github
</Step>
</Steps>

<Note>
All changes go through your normal GitHub workflow - maintaining your team's review process while making editing accessible to everyone.
</Note>

Ready to get started? Reach out to [email protected].
<CardGroup cols={2}>
<Card title="Easy to use" icon="duotone bolt">
- Edit inline, use the slash (`/`) menu to add components
- Preview changes as you type - no local setup
- Works across your entire docs site
</Card>

<Card title="GitHub‑backed workflow" icon="fa-github">
- Publishing creates a pull request with your changes
- Keep code review, CI checks, and branch protections
</Card>
</CardGroup>

All Fern components are supported. See the full list in the Components Overview: [Components Overview](https://buildwithfern.com/learn/docs/writing-content/components/overview).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would eliminate fern before components


## Why Fern Editor

- Makes updating your docs site super simple
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

biggest benefit is around usability by non-technical teammates who aren't familiar with a code editor, terminal, markdown, or yaml.

- GitHub-backed so you’ll always have a PR to review and merge

<Tip>
Have feedback? Use the Feedback button in the top-right of the editor.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would remove.

</Tip>

## FAQ

<AccordionGroup>
<Accordion title="How is “WYSIWYG” related to Fern Editor?">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would remove quotes from WYSIWYG and spell out the acronym

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could be the question:
Is Fern Editor a WYSIWYG editor?

“WYSIWYG” is a common term for visual editing. Fern Editor is our visual editor - same idea, clearer name.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can the answer just be "yes, Fern Editor is a WYSIWYG editor."

</Accordion>

<Accordion title="Why is a GitHub‑backed editor important?">
Your changes become pull requests. That means code review, auditability, CI checks, and merge control with branch protections - no surprises in production.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would mention docs-as-code here. Would mention that docs-as-code makes consumption by AI tools easier.

</Accordion>

<Accordion title="Does Fern Editor support all components?">
Yes. Fern Editor supports all built‑in components. See the full list here: [Components Overview](https://buildwithfern.com/learn/docs/writing-content/components/overview).
</Accordion>

<Accordion title="Can I use Fern Editor without local setup or CLI?">
Yes. Edit directly in the browser - no local environment required. Your GitHub PR keeps your normal review and CI process.
</Accordion>

<Accordion title="How do I start using Fern Editor?">
Log in to the [Dashboard](https://dashboard.buildwithfern.com/), connect GitHub, then open Fern Editor from the top navigation.
</Accordion>

<Accordion title="Is Fern Editor good for SEO and performance?">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would remove. Don't think anyone will ask this question.

Yes. Pages are server‑rendered and optimized for SEO. Components within accordions and tabs are still indexable.
</Accordion>

<Accordion title="What browsers and devices does Fern Editor support?">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you just say Chrome?

Modern Chromium, Firefox, and Safari on desktop. Mobile editing is not yet supported.
</Accordion>
</AccordionGroup>

11 changes: 11 additions & 0 deletions fern/products/home/pages/images/swift-logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions fern/products/home/pages/welcome.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,9 @@ import { FernFooter } from "../../../components/FernFooter";
<a className="language-icon" href="/sdks/generators/ruby/quickstart">
<img src="./images/ruby-logo.svg" alt="Ruby" className="language-icon-img" noZoom />
</a>
<a className="language-icon" href="/sdks/generators/swift/quickstart">
<img src="./images/swift-logo.svg" alt="Swift" className="language-icon-img" noZoom />
</a>
</div>

{/* Action Buttons */}
Expand Down Expand Up @@ -292,6 +295,10 @@ import { FernFooter } from "../../../components/FernFooter";
<a className="language-icon" href="/sdks/generators/ruby/changelog">
<img src="./images/ruby-logo.svg" alt="Ruby" className="language-icon-img" noZoom />
</a>
{/* Swift */}
<a className="language-icon" href="/sdks/generators/swift/changelog">
<img src="./images/swift-logo.svg" alt="Swift" className="language-icon-img" noZoom />
</a>
</div>
</div>

Expand Down
Loading