Add TypeContent to your project

TypeContent is open source. You own the code: copy it, customize it, connect your own storage later. No hosted service required.

Option 1: CLIComing with the CLI package

npx typecontent init
npx typecontent add editor

init detects your package manager, TypeScript and React, then writes typecontent.config.ts. add copies source into your project and never overwrites existing files unless you pass --force.

typecontent.config.ts

export default {
  componentsDir: "./src/components/typecontent",
  contentTypesDir: "./src/content-types",
  blocksDir: "./src/components/typecontent/blocks",
};

Option 2: PackagesPlanned — not on npm yet

npm install @typecontent/editor @typecontent/core

@typecontent/core — Content model, domain types, adapter interfaces and an in-memory adapter.
@typecontent/markdown — Dependency-free Markdown parser, serializer and editing commands.
@typecontent/blocks — Block registry, built-in blocks and the callout custom block.
@typecontent/seo — Deterministic SEO analyzer — no AI, no network.
@typecontent/content-types — Blog, Page, Docs, Knowledge Base, Changelog, Course and defineContentType().
@typecontent/editor — ContentEditor, toolbar, preview, slash commands, SEO and metadata panels.

Option 3: Copy source

Copy the editor source into your application. Everything runs on the client — no server-only modules, no Node APIs — so it works in Vite, Next.js and Cloudflare apps.

Blog integration

import { useState } from "react";
import { ContentEditor } from "@typecontent/editor";
import { blog } from "@typecontent/content-types";

export function BlogEditor() {
  const [content, setContent] = useState({ title: "", markdown: "" });
  // SEO analyzer runs live in the side panel
  return (
    <ContentEditor
      contentType={blog}
      value={content}
      onChange={setContent}
      showTypeSwitcher={false}
    />
  );
}

Docs integration

import { useState } from "react";
import { ContentEditor } from "@typecontent/editor";
import { docs } from "@typecontent/content-types";

export function DocsEditor() {
  const [content, setContent] = useState({ title: "", markdown: "" });
  // SEO analyzer runs live in the side panel
  // Table of contents / navigation come from the content type's metadata
  // Version + release date fields are enabled
  return (
    <ContentEditor
      contentType={docs}
      value={content}
      onChange={setContent}
      showTypeSwitcher={false}
    />
  );
}

Create your own content type

Six types ship built in. Case studies, recipes, job posts, FAQs — define anything with defineContentType. The editor stays the same; only configuration changes.

import { defineContentType } from "@typecontent/content-types";
import { ContentEditor } from "@typecontent/editor";

const caseStudy = defineContentType({
  id: "case-study",
  name: "Case Study",
  features: { seo: true, featuredImage: true, author: true, publishDate: true },
  metadataGroups: [
    {
      id: "project",
      label: "Project",
      fields: [
        { key: "client", label: "Client", kind: "text", feature: "author" },
        { key: "industry", label: "Industry", kind: "text", feature: "author" },
      ],
    },
  ],
});

<ContentEditor contentType={caseStudy} showTypeSwitcher={false} />

Connect storage

const adapter: ContentAdapter = {
  create, get, update, delete: remove, list, publish, unpublish,
};

Open source · License: TBD