SemType type editor

Introduction

The SemType type editor is a React component for authoring entity types compatible with the SemType registry — types defined according to the underlying Block Protocol Type System.

It is published to npm as @hashintel/type-editor, and is the same component used by HASH to author the entity types that can then be published to SemType.

Installation

npm install @hashintel/type-editor

Or using Yarn:

yarn add @hashintel/type-editor

Peer dependencies

@hashintel/type-editor requires the following peer dependencies:

• react ^19.0.0
• react-dom ^19.0.0
• react-hook-form 7.61.1
• @mui/material ^5.14.0
• @mui/system ^5.14.0

Usage

The type editor exports react-hook-form methods which must be used to wrap the component in the required form context. The minimal shape looks like this:

import {
  EntityTypeEditor,
  EntityTypeFormProvider,
  useEntityTypeForm,
  type EntityTypeEditorFormData,
} from "@hashintel/type-editor";

export function MyTypeEditor({
  defaultValues,
  ontologyFunctions,
}: {
  defaultValues: EntityTypeEditorFormData;
  ontologyFunctions: EditorOntologyFunctions;
}) {
  const formMethods = useEntityTypeForm<EntityTypeEditorFormData>({
    defaultValues,
  });

  return (
    <EntityTypeFormProvider {...formMethods}>
      <EntityTypeEditor
        customization={
          {
            /* ... */
          }
        }
        entityType={defaultValues.entityType}
        ontologyFunctions={ontologyFunctions}
      />
    </EntityTypeFormProvider>
  );
}

The package also exports helpers for converting between entityType (the Block Protocol-shaped object) and the internal form data:

• getEntityTypeFromFormData(formData) — produce a Block Protocol entity type from the editor's form state.
• getFormDataFromEntityType(entityType) — produce the editor's form state from a Block Protocol entity type.

For a complete reference example, see the HASH frontend usage of EntityTypeEditor.

Related

• SemType entity editor — for editing entities that conform to types authored with this component.
• SemType — the registry of semantic types this editor authors for.
• Block Protocol Type System — the underlying specification this component implements.

Source and license

• Source: github.com/hashintel/hash → libs/@hashintel/type-editor
• npm: @hashintel/type-editor
• License: AGPL-3.0