Build beautiful reusable blocks for your React apps
A powerful visual CMS that puts developers first. Create, customize, and deploy reusable components with full localization and rich text editing support.
Powerful features for modern web development
Everything you need to build flexible, maintainable React applications with a focus on developer experience.
Reusable Blocks
Create modular, reusable blocks that can be composed to build complex interfaces with minimal code.
Built-in Localization
Support multiple languages out of the box with integrated translation management and context switching.
Rich Text Editing
Powerful WYSIWYG editor with markdown support, formatting controls, and custom extensions.
Visual Editing
Drag-and-drop interface for arranging blocks, with live preview of changes as you build.
Developer-First
Full TypeScript support, customizable components, and a plugin system for extending functionality.
Performance Focused
Optimized rendering with code-splitting, lazy loading, and minimal runtime overhead.
API Integration
Connect to any data source with RESTful APIs and GraphQL support for dynamic content.
Role-Based Access
Control who can edit what with granular permissions at the block and page level.
What can you build with Blocksweb?
From simple landing pages to complex applications, Blocksweb powers a wide range of web projects with unmatched flexibility.
E-commerce
Build product pages, category listings, and promotional landing pages that convert visitors into customers.
Publishing & Blogs
Create content-rich websites with customizable layouts for articles, blogs, and multimedia content.
Documentation
Build interactive documentation sites with rich code examples, versioning, and search capabilities.
Marketing Sites
Design stunning marketing pages with flexible layouts that adapt to your brand and messaging needs.
Multilingual Sites
Create localized experiences with our built-in translation management and content variants.
Event Sites
Build interactive event pages with agendas, speaker profiles, and registration forms.
Knowledge Bases
Create organized, searchable knowledge bases with categorized content and smart navigation.
Dashboards
Build custom dashboards with data visualization components and user-specific content.
Need something more custom? Blocksweb's flexible architecture can be extended to fit virtually any content management need for React applications.
import React from "react";
import { motion } from "framer-motion";
import { IBlockswebComponent, RichText } from "@blocksweb/core";
type FeaturesProps = {
title: string;
description: string;
};
export const Features: IBlockswebComponent = (props: FeaturesProps) => {
return (
<section>
<div className="container mx-auto ">
<RichText propName={"title"} text={props.title} />
<motion.p
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
viewport={{ once: true }}
>
{props.description}
</motion.p>
</div>
</section>
);
};
Features.schema = {
displayName: "Features Grid",
options: [
{
name: "title",
type: "richtext",
label: "Title",
default: "How does it work?",
},
{
name: "description",
type: "text",
label: "Description",
default:
"You can create a React component how you always do, hook it up to the registry and specify what the content editors can edit.",
},
],
};// Use the block in your React component
import { BlocksRenderer, useBlocksContent } from 'blocksweb';
function HomePage() {
const { blocks, loading } = useBlocksContent('home-page');
if (loading) return <Loading />;
return (
<BlocksRenderer
blocks={blocks}
locale="en-US"
/>
);
}Built by developers,
for developers
We know you care about code quality, type safety, and developer experience. That's why we built Blocksweb with TypeScript from the ground up.
Define reusable content blocks once, then use them across your site with full type checking and autocompletion in your IDE.
With our flexible API, you can extend and customize every aspect of the system, from field types to rendering logic.
Key developer features:
- ✓First-class TypeScript support
- ✓Custom field validators and transformers
- ✓Plugin API for extensibility
- ✓Server components compatible
- ✓Headless rendering options
Ready to transform how you build React apps?
Join thousands of developers building better content experiences with Blocksweb