BlocksWebVisual CMS for React Developers

Why BlocksWeb? ​

BlocksWeb bridges the gap between developer flexibility and marketer autonomy. Traditional CMS platforms are either too rigid for developers or too complex for content teams. BlocksWeb gives you both.

For Developers ​

• Component-based architecture - Build reusable React components
• Full TypeScript support - Type-safe component schemas and props
• Framework agnostic - Works with Next.js 11-15, App Router or Pages Router
• No magic - Simple, predictable APIs with React hooks
• Version control friendly - Components live in your codebase

For Content Teams ​

• Visual editor - See changes in real-time as you build
• No code required - Drag, drop, and configure without developers
• Asset management - Upload and organize images with built-in manager
• Publishing workflow - Draft, preview, and publish with confidence
• Translations - Manage multi-language content in one place

Quick Example ​

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

// 1. Create a component
const HeroSection: IBlockswebComponent = ({ title, subtitle, image }) => {
  return (
    <section className="hero">
      <img src={image} alt={title} />
      <h1>{title}</h1>
      <p>{subtitle}</p>
    </section>
  );
};

// 2. Define the schema
HeroSection.schema = {
  displayName: 'Hero Section',
  options: [
    { type: 'text', name: 'title', label: 'Title', default: 'Welcome' },
    { type: 'text', name: 'subtitle', label: 'Subtitle', default: 'Your subtitle here' },
    { type: 'image', name: 'image', label: 'Hero Image', default: '/hero.jpg' }
  ]
};

export default HeroSection;

That's it! Your component is now editable in the BlocksWeb visual editor.

Trusted by Teams ​

BlocksWeb is used in production for marketing websites, e-commerce platforms, and content-heavy applications.