● Open source · MIT

Edytor drag & drop, który nie narzuca stylu

Jeden uniwersalny stan JSON, trzy renderery: strony WWW, maile HTML i dokumenty PDF. Headless, w pełni customizowalny, oparty na Reactcie i TypeScripcie.

$pnpm add @kodifyeditor/core
app.kodifyeditor.dev/editor
K
WebEmailPDF
Eksportuj
Klocki
Sekcja
Kolumny
Nagłówek
Tekst
Przycisk
Obraz
NOWOŚĆ
Buduj szybciej,
bez kompromisów
Edytor, który nie narzuca stylu
Zacznij za darmo
Nagłówek
Treść
Poziom
Wyrównanie
Kolor
Architektura

Jeden stan. Trzy wyjścia.

EditorState
BlockNode[]
Web
React / HTML
Email
<table> + inline CSS
PDF
@react-pdf
Dlaczego KodifyEditor

Zamknięte edytory narzucają swój wygląd. My nie.

Większość gotowych edytorów drag & drop wymusza własne style i komponenty. KodifyEditor jest headless — Ty dostarczasz design system, my dostarczamy silnik.

Twój design system

Rejestruj własne komponenty React jako klocki. Zero narzuconych klas CSS, zero walki ze stylami.

Czysty kod na wyjściu

Renderery generują dokładnie taki HTML, jakiego oczekujesz — bez wrapperów, bez śmieci, bez !important.

Stan jako źródło prawdy

Cała treść to serializowalny JSON. Zapisuj w bazie, wersjonuj, renderuj po stronie serwera.

Funkcje

Wszystko, czego potrzebuje edytor

Drag & drop

Przeciągaj klocki z biblioteki, zmieniaj kolejność, zagnieżdżaj w kolumnach i sekcjach.

Edycja inline

Klikaj i pisz bezpośrednio na płótnie. Inspector do precyzyjnej kontroli właściwości.

Zmienne dynamiczne

Wstawiaj {{ pola }} i mapuj tablice danych — idealne do faktur i personalizacji.

Responsywny podgląd

Przełączaj desktop / mobile dla web i tryb podglądu z podstawionymi danymi.

TypeScript first

W pełni otypowane API, autouzupełnianie props klocków i bezpieczne schematy.

Historia zmian

Wbudowane cofnij / ponów oparte na niemutowalnych snapshotach stanu.

Monorepo

Cztery paczki, czysty podział odpowiedzialności

@kodifyeditor/core

Centralna logika: stan JSON, mechanizm drag & drop, EditorProvider i hook useEditorState.

Silnikv0.1.0
@kodifyeditor/web

Komponent <PageBuilder /> i WebRenderer. Klocki sekcji, tekstu, przycisków, siatki.

Webv0.1.0
@kodifyeditor/email

<EmailBuilder /> + renderer kompilujący stan do <table> z inline CSS — działa w Outlooku.

Emailv0.1.0
@kodifyeditor/document

<DocumentBuilder /> + PdfRenderer ze zmiennymi i tabelami dynamicznymi do faktur.

PDFv0.1.0
Stan dokumentu

Drzewo klocków, które rozumiesz

Każdy węzeł to prosty obiekt: id, type, props i opcjonalne children. Ten sam JSON zasila wszystkie trzy renderery.

Pełna specyfikacja stanu →
document.json
{
  "root": [
    {
      "id": "b_hero",
      "type": "section",
      "props": { "bg": "#0f1115" },
      "children": [
        {
          "id": "b_h1",
          "type": "heading",
          "props": {
            "text": "Witaj, {{ clientName }}",
            "level": 1
          }
        }
      ]
    }
  ]
}
Gotowy do startu?

Zacznij budować w mniej niż minutę

Otwórz interaktywne demo albo dodaj paczkę do swojego projektu.