Getting Started with Weaverse
Welcome to Weaverse - the revolutionary theme customizer and CMS for Shopify Hydrogen, now powered by React Router v7. Whether you’re a developer building custom storefronts or a merchant looking to create stunning e-commerce experiences, this guide will get you started quickly.What is Weaverse?
Weaverse bridges the gap between developer flexibility and merchant usability by combining Shopify Hydrogen with visual page building capabilities:- Visual Studio: Drag-and-drop page builder for merchants
- Component Library: Pre-built sections and reusable components
- Developer APIs: Full control over components, data, and styling
- Performance First: Server-rendered pages with no page-builder runtime shipped to shoppers
- Type Safety: Full TypeScript support on React 19
- React Router v7: Modern routing with enhanced developer experience
Quick Links
- 📚 5-Minute Quickstart - Get a demo site running locally
- ⚡ Installation Guide - Add Weaverse to your project
Architecture Overview
Weaverse projects follow a modern Hydrogen structure optimized for visual editing:my-hydrogen-store
app
.server
components
sections
routes
utils
weaverse
public
server.ts
package.json
Key Concepts:
- Components: Reusable UI elements with configurable properties
- Sections: Page-level building blocks for layout structure
- Pages: Collections of sections forming complete experiences
- Studio: External visual editor at studio.weaverse.io
New to Weaverse v5?
🚀 Major Update: Weaverse v5 brings React Router v7 support and significant improvements. Check out our v5 Migration Guide for upgrade instructions.Learning Path
- Start Here: Follow our Quickstart Guide
- Understand: Read Core Concepts to learn how Weaverse works
- Build: Follow the Development Guide to create components
- Deploy: Use our Deployment Guide to go live
Need Help?
- 💬 Community Forum - Connect with other developers
- 📖 FAQ - Common questions and answers
- 📚 Complete Tutorial - Step-by-step walkthrough