-
Notifications
You must be signed in to change notification settings - Fork 2
feat: udpating ve #931
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
feat: udpating ve #931
Changes from 2 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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 | ||
--- | ||
|
||
<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. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
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 | ||
|
||
|
||
## 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). | ||
|
||
|
||
## Why Fern Editor | ||
|
||
- Makes updating your docs site super simple | ||
|
||
- 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. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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?"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. would remove quotes from WYSIWYG and spell out the acronym There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. could be the question: |
||
“WYSIWYG” is a common term for visual editing. Fern Editor is our visual editor - same idea, clearer name. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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?"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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?"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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> | ||
|
There was a problem hiding this comment.
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?docs/fern/products/docs/docs.yml
Lines 65 to 68 in 1fd9ed7