Skip to content
Open
Show file tree
Hide file tree
Changes from all 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
18 changes: 17 additions & 1 deletion fern/assets/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -1093,4 +1093,20 @@ a[href*="changelog"] svg {
.modify-snippet tbody tr:last-of-type td:last-of-type .line span:last-of-type:before {
content: "/";
display: inline-block;
}
}

/*** START -- FERN EDITOR STYLING ***/
.fe-action-button {
display: flex;
flex-direction: row;
gap: 1rem;
align-items: center;
justify-content: space-between;
text-decoration: none;
color: var(--grayscale-12);

svg.external-link-icon {
display: none;
}
}
/*** END -- FERN EDITOR STYLING ***/
3 changes: 1 addition & 2 deletions fern/products/cli-api-reference/cli-changelog/2025-09-22.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
## 0.78.4
**`(fix):`** Collapse any combination of optional and nullable to optional<nullable<T>>.
**`(fix):`** Collapse any combination of optional and nullable to `optional<nullable<T>>`.

## 0.78.3
**`(chore):`** Support IR v59 in the Rust SDK generator.

2 changes: 1 addition & 1 deletion fern/products/docs/docs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ navigation:
- page: Tooltips
path: ./pages/component-library/default-components/tooltips.mdx
icon: fa-duotone fa-comment
- page: Visual Editor
- page: Fern Editor
path: ./pages/component-library/writing-content/visual-editor.mdx
- page: Reusable snippets
path: ./pages/component-library/custom-components/reusable-markdown.mdx
Expand Down
2 changes: 1 addition & 1 deletion fern/products/docs/pages/authentication/sso.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Fern’s Single Sign-On (SSO) is an enterprise feature that lets your team secur

When SSO is enabled for your organization, authenticated users of Fern can:

- **Use the Visual Editor**: Make edits to your docs from the browser
- **Use the Fern Editor**: Make edits to your docs from the browser
- **Send Authenticated Preview Links** Only authenticated users can view [preview links](/learn/docs/preview-publish/previewing-changes-locally)

## How it works
Expand Down
Binary file not shown.
Original file line number Diff line number Diff line change
@@ -1,86 +1,115 @@
---
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" />
<img src="./visual-editor.avif" />
</Frame>

## 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>
<a className="fern-card interactive not-prose rounded-3 relative block border p-6 text-base fe-action-button" href="https://dashboard.buildwithfern.com/">
## Try it now
<Button intent="primary" rightIcon="arrow-right">
Open Dashboard
</Button>
</a>

## Key features

<CardGroup cols={2}>
<Card title="Expressive rich text" icon="duotone edit">
Edit Fern Docs from an intuitive Notion-style interface
</Card>

<Card title="Fern components support" icon="duotone puzzle-piece">
Create and edit Callouts, Cards, etc directly from UI, with more components coming soon ✨
</Card>

<Card title="One-click PRs" icon="duotone code-compare">
Seamlessly push changes up to GitHub for review and publishing
</Card>

<Card title="Dev mode" icon="duotone code">
Fully customize your site's source code from the editor when you need a little more control
</Card>

<Card title="[Beta] Images & videos" icon="duotone image">
Drag & drop to upload media to your site, with full support for git-backed files coming soon
</Card>

<Card title="[Beta] Create new pages" icon="duotone file-plus">
Create/delete new pages from the editor, with more features for organizing the navigation structure of your site coming soon
</Card>
</CardGroup>

<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="What are the supported components?">
<br />

<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>
| Component | Support Status |
| --- | --- |
| [Accordions](/learn/docs/content/components/accordions) | Supported |
| [Accordion Groups](/learn/docs/content/components/accordion-groups) | Supported |
| [Aside](/learn/docs/content/components/aside) | Coming soon |
| [Button](/learn/docs/content/components/button) | Coming soon |
| [Callouts](/learn/docs/content/components/callouts) | Supported |
| [Cards](/learn/docs/content/components/cards) | Supported |
| [Card Groups](/learn/docs/content/components/card-groups) | Supported |
| [Code Blocks](/learn/docs/content/components/code-blocks) | Supported |
| [Embed](/learn/docs/content/components/embed) | Coming soon |
| [Endpoint Request Snippet](/learn/docs/content/components/request-snippet) | Coming soon |
| [Endpoint Response Snippet](/learn/docs/content/components/response-snippet) | Coming soon |
| [Endpoint Schema Snippet](/learn/docs/content/components/schema-snippet) | Coming soon |
| [Frames](/learn/docs/content/components/frames) | Coming soon |
| [Icons](/learn/docs/content/components/icons) | Coming soon |
| [Parameter Fields](/learn/docs/content/components/parameter-fields) | Supported |
| [Steps](/learn/docs/content/components/steps) | Supported |
| [Sticky tables](/learn/docs/content/components/sticky-tables) | Coming soon |
| [Tabs](/learn/docs/content/components/tabs) | Supported |
| [Sticky tables](/learn/docs/content/components/sticky-tables) | Coming soon |
| [Tooltips](/learn/docs/content/components/tooltips) | Coming soon |

<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].
<br />
</Accordion>

<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>

10 changes: 5 additions & 5 deletions fern/products/docs/pages/getting-started/how-it-works.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ flowchart TD
You can update your documentation in two ways:

- **Direct editing**: Open a pull request directly in the [GitHub repository that contains your docs](/learn/docs/getting-started/project-structure) (including your `docs.yml` configuration and Markdown files).
- **Visual Editor**: Use Fern's [Visual Editor](/learn/docs/writing-content/visual-editor) to modify your docs without touching code. The Fern GitHub App fetches the current state from your docs repository and passes it to the Visual Editor. When you submit changes, the Fern GitHub App automatically opens a pull request for review.
- **Fern Editor**: Use the [Fern Editor](/learn/docs/writing-content/visual-editor) to modify your docs without touching code. The Fern GitHub App fetches the current state from your docs repository and passes it to the Fern Editor. When you submit changes, the Fern GitHub App automatically opens a pull request for review.

After the update goes through your review process, an approver can merge it.

Expand Down Expand Up @@ -116,19 +116,19 @@ This diagram shows how content flows from editing to deployment.

```mermaid
flowchart TD
FVE[Fern Visual Editor]
FE[Fern Editor]
U[User]
DR[Docs Repo]
CLI[Fern CLI]
Decision{Make a PR or edit in Visual Editor?}
Decision{Make a PR or edit in Fern Editor?}
Spec((API Spec Repo))
GA[GitHub Actions]

U ==> Decision
Decision == Make edit ==> FVE
Decision == Make edit ==> FE
Decision == Open and Merge PR ==> DR

FVE <== Fetches state and opens PR ==> DR
FE <== Fetches state and opens PR ==> DR
DR == ① Merged PR triggers deployment flow ==> GA

Spec <-. ② Fetches and merges API spec .-> GA
Expand Down
14 changes: 7 additions & 7 deletions fern/products/docs/pages/getting-started/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -72,11 +72,11 @@ subtitle: A website builder for beautiful agent and developer-friendly docs.

<a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/writing-content/visual-editor">
<div class="flex items-start flex-col space-y-3">
<img class="mx-auto dark:hidden" alt="Visual Editor" src="./images/visual-editor.png" />
<img class="mx-auto hidden dark:block" alt="Visual Editor" src="./images/visual-editor-dark.png" />
<img class="mx-auto dark:hidden" alt="Fern Editor" src="./images/visual-editor.png" />
<img class="mx-auto hidden dark:block" alt="Fern Editor" src="./images/visual-editor-dark.png" />
<div class="w-full space-y-1 overflow-hidden">
<div class="text-(color:--grayscale-a12) text-body text-base font-semibold card-title">
Visual Editor
Fern Editor
<img src="./images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0" noZoom />
<img src="./images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0" noZoom />
</div>
Expand All @@ -89,8 +89,8 @@ subtitle: A website builder for beautiful agent and developer-friendly docs.

<a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/api-references/generate-api-ref">
<div class="flex items-start flex-col space-y-3">
<img class="mx-auto dark:hidden" alt="Visual Editor" src="./images/api-specs-light.png" />
<img class="mx-auto hidden dark:block" alt="Visual Editor" src="./images/api-specs-dark.png" />
<img class="mx-auto dark:hidden" alt="API Specs" src="./images/api-specs-light.png" />
<img class="mx-auto hidden dark:block" alt="API Specs" src="./images/api-specs-dark.png" />
<div class="w-full space-y-1 overflow-hidden">
<div class="text-(color:--grayscale-a12) text-body text-base font-semibold card-title">
Bring your own API Spec
Expand All @@ -106,8 +106,8 @@ subtitle: A website builder for beautiful agent and developer-friendly docs.

<a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/ask-fern/getting-started/what-is-ask-fern">
<div class="flex items-start flex-col space-y-3">
<img class="mx-auto dark:hidden" alt="Visual Editor" src="./images/ask-fern-light.png" />
<img class="mx-auto hidden dark:block" alt="Visual Editor" src="./images/ask-fern-dark.png" />
<img class="mx-auto dark:hidden" alt="Ask Fern" src="./images/ask-fern-light.png" />
<img class="mx-auto hidden dark:block" alt="Ask Fern " src="./images/ask-fern-dark.png" />
<div class="w-full space-y-1 overflow-hidden">
<div class="text-(color:--grayscale-a12) text-body text-base font-semibold card-title">
Ask Fern
Expand Down
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
2 changes: 1 addition & 1 deletion fern/products/sdks/introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ description: Generate idiomatic SDKs in multiple programming languages
</div>
</div>
</a>
<a class="fern-card interactive not-prose relative block p-6 text-base" href="https://buildwithfern.com/book-demo?type=language-request">
<a class="fern-card interactive not-prose relative block p-6 text-base" href="/sdks/generators/swift/quickstart">
<div class="flex items-start flex-col space-y-3">
<img class="mx-auto dark:hidden" alt="Request Swift" src="./images/swift-card.png" />
<img class="mx-auto hidden dark:block" alt="Request Swift" src="./images/swift-card-dark.png" />
Expand Down