Sanity Visual Editing & Live Preview Demo Project

We've developed a demo project 🚀 to test Sanity's Visual Editing and Live Preview features with NextJS. In our article 📝, we share insights from this experience, aiming to engage both developers and content creators 👩‍💻👨‍💻.

Key highlights include streamlined content management 📊, real-time updates ⏱️, and enhanced workflow efficiency 💡. Experience these benefits firsthand through our live demo here 🌐 and by exploring the deployed Sanity Studio here 🎨.

Quick Start for Content Creators

1. Visit the live project here.
2. Interact with the overlays to understand the visual editing features.
3. Click an overlay to be automatically redirected to the corresponding document in Sanity Studio with the editing field opened for immediate editing.
4. Observe the changes in real-time with the live preview.

Article Summary

Our article, "A Deep Dive into Sanity's Visual Editing and Presentation Tool: The Developer View," offers insights into the benefits and technical aspects of using Sanity Studio for visual editing and live preview in web development. It emphasizes the synergy between Sanity's content architecture and the dynamic capabilities of NextJS.

Project Description

Technology Highlights

• Sanity Studio: The central content management system, enabling dynamic content updates and management with rich visual editing features.
• NextJS: Powers the frontend, facilitating the Live Preview feature by integrating seamlessly with Sanity.
• Vercel: Used for hosting, enhancing the visual editing experience with efficient deployment and scalability.
• Sanity Overlays & Content Sourcemap: Innovative features that add context and interactivity to the visual editing process.

Live Preview and Visual Editing

The project showcases how Sanity's live preview and visual editing capabilities can enhance the content creation and development process. With real-time updates and an intuitive interface, content creators and developers can collaborate more effectively.

Local Development Instructions

To run the development server, follow these steps:

1. Clone this repository.
2. Install dependencies by running npm install or yarn install.
3. Start the development server with npm run dev or yarn dev.
4. Open http://localhost:3000 in your browser to see the result.
5. Access the Sanity Studio locally at http://localhost:3000/admin.
6. Edit the app/page.tsx file to make changes. The page auto-updates as you edit.
7. Provide your own project ID in the /sanity/config.ts file.

Access to Our Sanity Studio 😎🚀

Don't feel like setting up a new Sanity project from scratch? No worries! You can dive right into our Sanity Studio and see the magic firsthand. Just drop me a message on Twitter or reach out in the Sanity Community Slack. I'll get you an exclusive invite! But remember, with great power comes great responsibility... to edit content responsibly! 🕷️

Technical Details

This project is built using NextJS, focusing on the app router and the Static Site Generation (SSG) approach. The NextJS app router facilitates efficient page routing and dynamic content rendering, while the SSG approach enhances performance, SEO, and scalability.

The project utilizes a robust stack of key technologies:

• Next.js: 14.0.3
• React: 18.2.0
• Sanity Client (@sanity/client): 6.4.9
• next-sanity: 6.0.3
• Linaria (@linaria/core): 4.5.4
• next-with-linaria: 0.5.1
• rxjs: 7.8.1
• Node.js: 18.18.0
• TypeScript: 5.2.2

These technologies have been selected to ensure optimal performance and compatibility for our visual editing and live preview features.

Contributing to the Project 🤝

We love collaboration! If you're interested in contributing to this project, here's how you can get involved:

1. Fork the repository.
2. Create a new branch for your feature (git checkout -b feature/AmazingFeature).
3. Commit your changes (git commit -am 'Add some AmazingFeature').

4. Push to the branch (git push origin feature/AmazingFeature).

5. Open a pull request.

We're excited to see your innovative ideas and contributions. Let's make web development more visually engaging together!

Credits

This project was created at FocusReactive, the expert consultancy for the modern web. We specialize in helping clients beat the competition and accelerate business growth. With deep expertise in headless CMS, NextJS, and eCommerce, we deliver cutting-edge solutions that prioritize your business goals.

Our Expertise

• Content-Centric Websites: We have deep experience in building extendable, SEO-optimized content and marketing websites with advanced CMS integrations and analytics.
• Headless eCommerce: Our next-generation, content-rich, and performant online eCommerce websites come with end-to-end integrations to power your digital business.
• Headless CMS Consulting: We offer multi-channel CMS development, modeling, customization, and support to help you manage your content seamlessly across various platforms.
• Web Performance: Our experts can audit, transform the architecture, and optimize your website to meet the 100 SCORE Core Web Vitals for exceptional web performance.

If you're looking for expertise in headless CMS, NextJS, or eCommerce, get in touch with FocusReactive today. Visit our website at focusreactive.com to learn more about how we can help you accelerate your business growth.

License

This project is licensed under the MIT License. © 2023 FocusReactive.