What is a blocksweb component?

A blocksweb component is a simple react component with an additional schema object connected to it, this schema object allows the blocksweb editor to understand how to handle the component, this is done using Options. every Blocksweb component should be of typescript type IBlockswebComponent.

The IBlockswebComponent interface ensures that your components are properly structured and can be recognized by the Blocksweb editor. Components following this interface gain access to visual editing capabilities, option integration, and other features that make them fully functional within the Blocksweb ecosystem.

Your first blocksweb component

To get started with Blocksweb you can to create your first Blocksweb Component, here is an example of a simple Blocksweb component

import React from "react";
import { IBlockswebComponent } from "@blocksweb/core";

const SectionComponent: IBlockswebComponent = () => {
  return <div>This is a section component</div>;
};

SectionComponent.schema = {
  displayName: "SectionComponent",
  options: [],
};

export default SectionComponent;

The schema object is essential as it provides the editor with the necessary information to render and manage your component. The displayName property is particularly important as it determines how your component appears in the editor's component selection interface.

Registering Blocksweb components

Now the component is made, it needs to be registered. this can normally be done using the blocksweb.config.ts inside the root folder of your project.

Here is an example of a starter blocksweb.config.ts file

import { IBlockswebComponent } from "@blocksweb/core";
import SectionComponent from "./components/SectionComponent";

export const editorComponents: IBlockswebComponent[] = [SectionComponent];

export const settings = {
  editorComponents: editorComponents,
  scripts: ["https://cdn.tailwindcss.com"],
};

Components with Options

Building on our basic component, here's how you can integrate Options to make your component more dynamic:

import React from "react";
import { IBlockswebComponent } from "@blocksweb/core";

type HeroProps = {
  title: string;
  subtitle: string;
  backgroundColor: string;
};

const HeroComponent: IBlockswebComponent = (props: HeroProps) => {
  const { title, subtitle, backgroundColor } = props;
  
  return (
    <div style={{ backgroundColor }}>
      <h1>{title}</h1>
      <p>{subtitle}</p>
    </div>
  );
};

HeroComponent.schema = {
  displayName: "Hero Section",
  options: [
    {
      type: "text",
      name: "title",
      label: "Hero Title",
      default: "Welcome to Our Website",
    },
    {
      type: "text",
      name: "subtitle",
      label: "Hero Subtitle",
      default: "Learn more about our services",
    },
    {
      type: "text",
      name: "backgroundColor",
      label: "Background Color",
      default: "#f5f5f5",
    }
  ],
};

export default HeroComponent;

See Also

• Options - Learn about all available option types
• Content Management - Understand how to integrate data from the CMS
• Utilities - Explore utility components that can be used within your components
• Best Practices - Best practices for component design