WYSIWYG editor for teachers: Studio vs custom solution recommendations

Welcome to Sanity! Your education platform use case is a great fit for what Sanity offers. Let me break down how you can achieve that WYSIWYG-like editing experience for your teachers.

The Solution: Presentation Tool + Visual Editing

Sanity has a built-in feature called the Presentation tool that provides exactly what you're describing. It creates a side-by-side editing experience where teachers can see a live preview of the actual student-facing page while editing content in Studio. Even better, it includes click-to-edit overlays - interactive highlights on your preview that let editors click directly on content to jump to the right field in Studio.

Should the editor be inside Studio?

Yes, use the Presentation tool inside Studio for your use case. Here's why:

The Presentation tool gives you:

• Live preview of draft content updates in real-time as teachers type
• Click-to-edit overlays - teachers click on any content in the preview and it takes them directly to that field
• Side-by-side editing - Studio editing interface on one side, live preview on the other
• Visual context - teachers see changes immediately on a pixel-perfect replica of the student view

This is different from editing directly on the frontend (which is possible but more complex). The Presentation tool strikes the perfect balance: teachers get visual feedback while editing in a controlled environment.

How It Works Technically

1. Content Source Maps: Sanity embeds metadata (called stega encoding) that maps preview content back to Studio fields
2. Framework integration: Works with Next.js, Nuxt, SvelteKit, React Router, and most modern frameworks
3. Real-time updates: As teachers edit, the preview updates instantly using Sanity's live preview capabilities

Pros of Using Sanity for This

✅ Built for this exact use case - Visual editing is a core Sanity feature, not a bolt-on
✅ Available on free plan - You can start testing without cost
✅ Framework agnostic - Works with your existing frontend components
✅ Structured content - Unlike traditional WYSIWYG, content stays structured and reusable across different contexts
✅ Scalable - Handles multiple teachers editing simultaneously
✅ Role-based access - You can give students read-only access, teachers editing rights
✅ Real-time collaboration - Multiple teachers can work together with comments and feedback
✅ Drag-and-drop page building - Teachers can reorder content sections visually

Cons/Considerations

⚠️ Not 100% WYSIWYG - Teachers edit in Studio fields (text inputs, rich text editors) while seeing the preview, not editing directly on the rendered page like WordPress
⚠️ Setup required - You need to configure Content Source Maps and integrate your frontend
⚠️ Learning curve - Teachers need to understand the Studio interface (though it's quite intuitive)
⚠️ Portable Text - Sanity's rich text solution is structured, not traditional WYSIWYG HTML. Consider sanity-plugin-tiptap for a more familiar WYSIWYG-like editing experience
⚠️ Browser requirements - Drag-and-drop works in modern browsers (Chrome 108+, Safari 15.6+, Firefox 115+) but not on touch devices currently

Recommendations for Getting Started

1. Start with the Next.js quickstart: This gets you a working Sanity + Next.js application with TypeScript in minutes. The quickstart includes everything you need to get started.

2. Enable the Presentation tool: Install @sanity/presentation and configure it to preview your frontend. The Next.js + Presentation guide walks through this setup.

3. Set up Content Source Maps: Follow the visual editing overlays guide to enable click-to-edit functionality. This involves configuring stega encoding in your queries.

4. Configure Portable Text: For rich text content in your educational topics, consider the tiptap plugin for a more WYSIWYG-like experience that feels familiar to teachers.

5. Test the workflow: Have a teacher try the edit → preview → publish flow early to validate the user experience.

6. Consider drag-and-drop: If teachers need to rearrange topic sections, implement the drag-and-drop page building feature.

Alternative: Canvas for Free-Form Writing

If teachers need to write longer-form educational content, also look at Sanity Canvas - it's an AI-assisted writing environment that syncs to Studio. It provides a more document-like writing experience that might feel more natural for educational content creation.

The Bottom Line

Sanity gives you "close to perfect" WYSIWYG through the Presentation tool's live preview + click-to-edit, while keeping your content structured and portable. This is actually better than traditional WYSIWYG for an educational platform because:

• Content can be reused across different contexts (mobile app, PDF exports, different page layouts)
• You maintain consistent formatting and structure
• Teachers can't accidentally break the design
• Content is future-proof and not locked into HTML markup

The key is setting expectations: teachers edit in fields while watching a live preview, rather than editing directly on the page. Most teams find this workflow actually more efficient once they try it! 😌