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.

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;

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"],
};