SemType Type Editor

Copy link to this sectionIntroductionCopy link to this section

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.

Copy link to this sectionInstallationCopy link to this section

npm install @hashintel/type-editor

Or using Yarn:

yarn add @hashintel/type-editor

Copy link to this sectionPeer dependenciesCopy link to this section

@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

Copy link to this sectionUsageCopy link to this section

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.

Copy link to this sectionRelatedCopy link to this section

• 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.

Copy link to this sectionSource and licenseCopy link to this section

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