Space is a modern, WYSIWYG page builder for Shopify that empowers merchants to create custom landing pages, product pages, and theme sections without writing code.
Space is built on a decoupled, three-part architecture:
- The Editor (Frontend): React-based SPA that loads inside Shopify Admin
- The Backend (API & Database): Node.js server handling authentication, page storage, and Shopify API communication
- The Renderer (Storefront): Shopify Theme App Extension for high-performance page rendering
- Real-time WYSIWYG editing
- Drag & drop interface with dnd-kit
- Responsive previews (Desktop, Tablet, Mobile)
- Component nesting
- Element hierarchy/tree (Layers panel)
- Layout: Section, Container, Grid
- Basic: Heading, Text, Button, Image, Video, Icon, Spacer, Divider
- Shopify-Native: Product Box, Product Grid, Add to Cart Button
- Advanced: Slider/Carousel, Tabs, Accordion, Custom HTML/Liquid
- Full Flexbox and Grid controls
- Granular spacing controls (Margin, Padding)
- Typography controls
- Background (solid, image, gradient)
- Borders and border radius
- State styling (Hover, Active)
- Product picker with catalog search
- Collection picker
- Dynamic data binding
- Theme App Extension for rendering
- JSON-to-HTML server-side rendering
- Standalone page creation
# 1. Install dependencies
npm install
# 2. Run development server
npm run devThe Shopify CLI will guide you through the setup process automatically.
For detailed setup instructions, see:
- QUICK_START.md - Quick reference guide
- SETUP_GUIDE.md - Complete step-by-step instructions
- Node.js v18 or higher
- Shopify CLI (
npm install -g @shopify/cli) - Shopify Partner account (free at https://partners.shopify.com)
- Development store (free, created via Partner dashboard)
space/
├── app/
│ ├── routes/ # Remix routes
│ ├── components/ # React components
│ ├── lib/ # Utilities and helpers
│ └── models/ # Data models
├── extensions/
│ └── theme-app-extension/ # Theme App Extension
└── public/ # Static assets
MIT