Sanity / Next.js Visual Block Editor 🕸️
highly customised / customizable visual website builder & CMS with 60+ responsive, reusable, html, css & tailwind blocks for react , or nextjs 14!
The GrapesJs & sanity integration made to better the user interface, and editing capabilities of the sanity studio & nextjs 14 app router. This integration brings a powerful, web-based drag-and-drop editor to the forefront of the content management experience allowing users to intuitively arrange and design their content layouts in a nextjs 14 app / any front-end (soon) without needing technical knowledge, while still leveraging the studio to structure content in a server & client side rendered app!
Visual HTML & CSS Editor for the Sanity.io CMS / CMS/Studio Version: 1.1.1
In this Sanity Studio project, we've integrated GrapesJS to offer a comprehensive, interactive, and user-friendly visual content / UI editing experience. This setup allows for intuitive drag & drop functionality, extensive customization, global blocks / components, and real-time updates.
- Front-Ends for CMS (next.js App dir Demo front-end), (nexts.js with src dir / Pages router, full-stack Demo with an embedded studio running grapes at /studio).
FEATURES:
Here is a couple video previews from a production version! showcasing a Next.js 14 landing page getting updated is seconds after saving the visual editors content!
You can easily add authentication to your app, or website + user info (/data) in a couple clicks, design a signup page in seconds, then style, edit, and add content to your global header & footer, all from the same place.
I've added an improved custom "fullscreen" function allowing for easier & smoother editing, that is more "sanity friendly" (literally).
We are currently integrating custom Iframes & other simple embeds like the g-maps solution, ads for revenue, and technology like nodemailer to send mail from your generated pages!
(!!! the Last couple of vids are from a private version, more info coming soon!)
The drag and drop functionality makes it easy to rearrange content blocks and sections by simply clicking and dragging them to a new position. This streamlined interaction is more intuitive than having to cut/copy and paste content & is an extensive visual html editor! it comes with 60+ responsive html & tailwind blocks + you can style & add as many custom global blocks as you want, making it easy for designers & coders to create whatever they desire.
Style html & css like global headers and footers like the Video above from the right panel options in your new sanity studio document editors, and save the content to see updates in your nextjs 14 front-end page once revalidated, (or create your own front) without losing the security and structure of a headless cms!
(!!! from an older beta version):
On top of that, by adding client and server-side encryption by choice, the content being edited remains secure both when it's being transmitted from the client to the server, as well as when it's stored on the server database, this can be disabled!
TODO:
- Enhance drag & drop functionality for smoother interactions.
Introduce more customization options for both editors.Implement real-time collaboration features for team editing.-
Improve server-side encryption for enhanced security - Develop comprehensive documentation for easy setup and usage
Write unit tests to ensure reliability and stability.7. Integrate TailwindCSS and dynamic floating panels for a seamless design experience.Add more blocks & global options.- More front-ends / back-ends will be supporting my page builder soon!
- Need to add a blog site & template / schema.
- Add comment section to each blog and custom sanity comments document / plugin / dashboard for moderating.
- Add Ai assistant to write custom code based on a prompt from the last selected component in grapes.
Create user database.Improve grapes tailwind parser to include custom cssReplace the core grapes fullscreen function with custom "sanity studio friendly" fullscreen mode- Add custom e-commerce & image storage ( this + more is being done in a private branch )
CONCLUSION:
Overall, these additions create a modern, secure, and seamless editing experience tailored specifically for the needs of this project's content authors and editors. The focus is on providing powerful capabilities while keeping the UI clean and user-friendly, this project showcases skills in building dynamic web solutions that are user centric, cheap, and easy to use!