BlocksWeb Developer Docs

Appearance

BlocksWeb Documentation ​

Comprehensive developer documentation for BlocksWeb - the visual CMS for React developers.

Overview ​

This documentation covers everything from getting started with BlocksWeb to deploying production applications.

Documentation Structure ​

Getting Started ​

  • Introduction - What is BlocksWeb and why use it
  • Quick Start - Get up and running in 5 minutes
  • Installation - Detailed setup instructions
  • Your First Component - Build a component step-by-step
  • Project Structure - Understand the file organization

Core Concepts ​

  • Components & Schema - How BlocksWeb components work
  • Options System - Understanding editable properties
  • Pages & Routing - Page management and navigation
  • Editor Basics - Using the visual editor
  • Data Flow - How data flows through your application

Component Development ​

  • Creating Components - Best practices and patterns
  • Options Reference - Complete reference for all 12 option types
  • Nesting Components - Component composition
  • Utilities - RichText, Image, and BlockOutlet helpers
  • Best Practices - Production-ready patterns

Collections & Data ​

  • Collections Overview - Introduction to collections
  • Defining Collections - Create product catalogs, blogs, etc.
  • Collection Providers - Data sources and integrations
  • Querying Data - Filter, sort, and search
  • Collection Hooks - React hooks for data fetching

Editor Features ​

  • Visual Editing - Real-time page building
  • Asset Management - Image uploads and organization
  • Page Management - Page tree and navigation
  • Translations - Multi-language support
  • Publishing Workflow - Draft, preview, publish

Advanced Topics ​

  • A/B Testing - Visual test builder
  • Analytics - Page analytics and tracking
  • Caching - Performance optimization
  • Custom Providers - Build custom data sources
  • Localization - Internationalization

API Reference ​

  • Client Hooks - React hooks for data fetching
  • Server Functions - Server-side data access
  • Configuration - Complete config reference
  • Component Types - TypeScript type definitions

Deployment ​

  • Production Build - Prepare for deployment
  • Vercel - Deploy to Vercel (recommended)
  • Cloudflare Pages - Deploy to Cloudflare
  • Self-Hosting - Host on your own infrastructure
  • Environment Variables - Configuration management

Troubleshooting ​

  • Common Issues - Solutions to frequent problems
  • Debug Mode - Enable detailed logging
  • Performance Tips - Optimize your application
  • FAQ - Frequently asked questions

Development ​

Prerequisites ​

  • Node.js 18+
  • npm, yarn, or pnpm

Local Development ​

bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build documentation
npm run build

# Preview production build
npm run start

Project Structure ​

apps/docs/
├── guide/                  # Main guides
│   ├── introduction.md
│   ├── quick-start.md
│   ├── installation.md
│   └── ...
├── api/                    # API reference
│   ├── hooks.md
│   ├── server.md
│   ├── configuration.md
│   └── types.md
├── deployment/             # Deployment guides
│   ├── production-build.md
│   ├── vercel.md
│   └── ...
├── troubleshooting/        # Troubleshooting
│   ├── common-issues.md
│   └── ...
├── .vitepress/            # VitePress config
│   └── config.mts
├── index.md               # Home page
└── package.json

Built With ​

Contributing ​

To add or update documentation:

  1. Create/edit markdown files in the appropriate directory
  2. Update .vitepress/config.mts if adding new pages
  3. Test locally with npm run dev
  4. Build to verify with npm run build
  5. Submit a pull request

Writing Guidelines ​

Markdown Features ​

VitePress supports:

  • GitHub-flavored markdown
  • Code syntax highlighting
  • Custom containers (tip, warning, danger)
  • Frontmatter for metadata

Code Blocks ​

```typescript import { IBlockswebComponent } from '@blocksweb/core';

const MyComponent: IBlockswebComponent = () => { return

Hello World
; }; ```

Custom Containers ​

TIP

This is a tip

WARNING

This is a warning

DANGER

This is dangerous

Use relative paths:

markdown
[Quick Start](/guide/quick-start)
[API Reference](/api/hooks)

SEO Optimization ​

The documentation includes:

  • Meta tags for SEO
  • Open Graph tags for social sharing
  • Sitemap generation
  • Semantic HTML structure
  • Descriptive headings and content

Deployment ​

The documentation is automatically deployed to https://docs.blocksweb.nl when changes are pushed to the main branch.

Support ​

License ​

This documentation is part of the BlocksWeb project.

Built with ❤️ by the BlocksWeb team