Development Guide
This comprehensive guide covers everything you need to know to develop themes and components for Weaverse.Prerequisites
Before you start developing with Weaverse, ensure you have:- Node.js 18+ installed
- Familiarity with React and TypeScript
- Basic knowledge of Shopify Hydrogen
- Understanding of Tailwind CSS (recommended)
Development Workflow
Environment Setup
Configure your development environment, environment variables, and tools.Creating Components
Learn how to build Weaverse components with proper schemas and TypeScript support.Input Settings
Master the configuration system that lets merchants customize your components.Data Fetching
Implement server-side data loading for sections with Shopify API integration.Styling & Theming
Apply consistent styling with Tailwind CSS and global theme settings.Quick Start Checklist
- Set up your development environment
- Create your first component with schema
- Add input settings for customization
- Test in Weaverse Studio
- Implement proper TypeScript types
- Add error boundaries and loading states
Best Practices
- Performance: Keep components lightweight and optimize images
- Accessibility: Follow WCAG guidelines and use semantic HTML
- Mobile-First: Design responsive components from the start
- Schema Design: Create intuitive settings that merchants will understand
- Error Handling: Gracefully handle missing data and API failures
Development Tools
Weaverse provides comprehensive development tools to enhance your workflow:- Weaverse CLI - Command line interface for project scaffolding
- VS Code Integration - Enhanced editor support with IntelliSense
- Browser DevTools - Debug and inspect Weaverse components
Next Steps
Once you’ve mastered the basics:- Explore Features
- Learn about Pilot Theme
- Study the API Reference
- Join the Developer Community