diff --git a/packages/devkit/.eslintrc.cjs b/packages/devkit/.eslintrc.cjs
new file mode 100644
index 00000000..641154ca
--- /dev/null
+++ b/packages/devkit/.eslintrc.cjs
@@ -0,0 +1,10 @@
+module.exports = {
+  parserOptions: {
+    ecmaVersion: 6,
+    sourceType: "module",
+    project: __dirname + '/tsconfig.json'
+  },
+  extends: [
+    '../../.eslintrc.cjs',
+  ],
+};
\ No newline at end of file
diff --git a/packages/devkit/package.json b/packages/devkit/package.json
new file mode 100644
index 00000000..8f02b8f5
--- /dev/null
+++ b/packages/devkit/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@edybara/devkit",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "tsup --watch --tsconfig tsconfig.build.json",
+    "clean:dist": "rimraf dist",
+    "clean:dependency": "rimraf node_modules",
+    "build": "npm run clean:dist && npm run build:ts && npm run build:style",
+    "build:ts": "tsup --tsconfig tsconfig.build.json",
+    "build:style": "sass styles:styles"
+  },
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "style": "styles/devkit.scss",
+  "types": "dist/index.d.ts",
+  "private": true,
+  "dependencies": {
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/state": "^6.4.1",
+    "@edybara/ui": "*",
+    "codemirror": "^6.0.1",
+    "preact": "^10.20.1",
+    "prosemirror-commands": "*",
+    "prosemirror-dropcursor": "*",
+    "prosemirror-gapcursor": "*",
+    "prosemirror-history": "*",
+    "prosemirror-inputrules": "*",
+    "prosemirror-keymap": "*",
+    "prosemirror-model": "*",
+    "prosemirror-state": "*",
+    "prosemirror-transform": "*",
+    "prosemirror-utils": "*",
+    "prosemirror-view": "*"
+  },
+  "devDependencies": {
+    "rimraf": "^5.0.5",
+    "sass": "^1.69.5",
+    "tsup": "^8.0.1",
+    "typescript": "^5.2.2"
+  }
+}
diff --git a/packages/devkit/src/components/codemirror/codemirror.scss b/packages/devkit/src/components/codemirror/codemirror.scss
new file mode 100644
index 00000000..d5b2c121
--- /dev/null
+++ b/packages/devkit/src/components/codemirror/codemirror.scss
@@ -0,0 +1,11 @@
+.edybara-devkit-codemirror-container {
+  width: 100%;
+  margin-top: 12px;
+}
+
+.edybara-devkit-codemirror-wrapper {
+  border-radius: 3px;
+  border: 1px solid #bdbdbd;
+  height: 500px;
+  overflow-y: auto;
+}
diff --git a/packages/devkit/src/components/codemirror/codemirror.ts b/packages/devkit/src/components/codemirror/codemirror.ts
new file mode 100644
index 00000000..5e41cd82
--- /dev/null
+++ b/packages/devkit/src/components/codemirror/codemirror.ts
@@ -0,0 +1,109 @@
+import { Plugin as PMPlugin, PluginKey } from 'prosemirror-state';
+import { EditorState } from '@codemirror/state';
+import { EditorView, basicSetup } from 'codemirror';
+import { json } from '@codemirror/lang-json';
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'preact/compat';
+import { html } from '@edybara/ui';
+import { render } from 'preact';
+
+export interface CodeMirrorProps {
+  className?: string;
+  values?: string;
+  onStateChange?: (doc: any) => void;
+}
+
+export interface CodeMirrorRef {
+  view: EditorView | null;
+}
+
+export const CodeMirror = forwardRef<CodeMirrorRef, CodeMirrorProps>(
+  (props, ref) => {
+    const wrapper = useRef<HTMLDivElement>(null);
+    const [editorViewRef, setEditorViewRef] = useState<EditorView | null>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        view: editorViewRef,
+      }),
+      [editorViewRef],
+    );
+
+    useEffect(() => {
+      const view = new EditorView({
+        extensions: [basicSetup, json(), EditorState.readOnly.of(true)],
+        parent: wrapper.current!,
+        doc: props.values || '',
+      });
+      setEditorViewRef(view);
+      return () => {
+        view.destroy();
+      };
+    }, []);
+
+    useEffect(() => {
+      if (!editorViewRef) {
+        return;
+      }
+      editorViewRef.dispatch({
+        changes: {
+          from: 0,
+          to: editorViewRef.state.doc.length,
+          insert: props.values || '',
+        },
+      });
+    }, [props.values]);
+
+    return html`<div
+      className="edybara-devkit-codemirror-wrapper"
+      ref=${wrapper}
+    ></div> `;
+  },
+);
+
+export const edybaraDevkitCodeMirrorPlugins = (): PMPlugin[] => {
+  const plugin = new PMPlugin({
+    key: new PluginKey('edybaraDevkitToolbar'),
+    view: (editorView) => {
+      let root = editorView.dom.parentElement!;
+
+      while (root.className !== 'edybara-root') {
+        if (!root) {
+          return {};
+        }
+        if (root.classList.contains('edybara-root')) {
+          break;
+        }
+        root = root.parentElement!;
+      }
+
+      if (!root) {
+        return {};
+      }
+
+      const wrapper = document.createElement('div');
+      wrapper.classList.add('edybara-devkit-codemirror-container');
+      root.appendChild(wrapper);
+
+      const renderToolbar = (values: string) =>
+        render(
+          html`<${CodeMirror} editorView=${editorView} values=${values} />`,
+          wrapper,
+        );
+
+      renderToolbar(JSON.stringify(editorView.state.doc.toJSON(), null, 2));
+      return {
+        update: (view) =>
+          renderToolbar(JSON.stringify(view.state.doc.toJSON(), null, 2)),
+        destroy: () => render(null, wrapper),
+      };
+    },
+  });
+  return [plugin];
+};
diff --git a/packages/devkit/src/components/codemirror/index.ts b/packages/devkit/src/components/codemirror/index.ts
new file mode 100644
index 00000000..02696473
--- /dev/null
+++ b/packages/devkit/src/components/codemirror/index.ts
@@ -0,0 +1 @@
+export * from './codemirror';
diff --git a/packages/devkit/src/components/index.ts b/packages/devkit/src/components/index.ts
new file mode 100644
index 00000000..02696473
--- /dev/null
+++ b/packages/devkit/src/components/index.ts
@@ -0,0 +1 @@
+export * from './codemirror';
diff --git a/packages/devkit/src/index.ts b/packages/devkit/src/index.ts
new file mode 100644
index 00000000..07635cbb
--- /dev/null
+++ b/packages/devkit/src/index.ts
@@ -0,0 +1 @@
+export * from './components';
diff --git a/packages/devkit/styles/devkit.scss b/packages/devkit/styles/devkit.scss
new file mode 100644
index 00000000..bd6f2f67
--- /dev/null
+++ b/packages/devkit/styles/devkit.scss
@@ -0,0 +1 @@
+@import '../src/components/codemirror/codemirror.scss';
diff --git a/packages/devkit/tsconfig.build.json b/packages/devkit/tsconfig.build.json
new file mode 100644
index 00000000..e215005c
--- /dev/null
+++ b/packages/devkit/tsconfig.build.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "skipLibCheck": true,
+    "paths": {}
+  },
+}
\ No newline at end of file
diff --git a/packages/devkit/tsconfig.json b/packages/devkit/tsconfig.json
new file mode 100644
index 00000000..027c5e02
--- /dev/null
+++ b/packages/devkit/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": "./src",
+    "outDir": "./dist",
+    "declaration": true,
+    "paths": {
+      "@edybara/core": ["../../core/src/index.ts"],
+      "@edybara/ui": ["../../ui/src/index.ts"],
+    }
+  },
+  "include": [
+    "src/*"
+  ],
+  "files": [
+    "src/index.ts"
+  ]
+}
diff --git a/packages/devkit/tsup.config.ts b/packages/devkit/tsup.config.ts
new file mode 100644
index 00000000..0951957c
--- /dev/null
+++ b/packages/devkit/tsup.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  target: 'es2018',
+  entry: [
+    'src/index.ts',
+  ],
+  format: ['esm', 'cjs'],
+  dts: true,
+  splitting: false,
+  sourcemap: false,
+  clean: true,
+});
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 77c92f7d..3a391f9e 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -25,6 +25,7 @@
     "@edybara/codeblock": "*",
     "@edybara/command": "*",
     "@edybara/core": "*",
+    "@edybara/devkit": "*",
     "@edybara/emoji": "*",
     "@edybara/flat-list": "*",
     "@edybara/flat-task-list": "*",
diff --git a/packages/docs/src/components/examples/packages/core.tsx b/packages/docs/src/components/examples/packages/core.tsx
index c1f8bb49..f0885099 100644
--- a/packages/docs/src/components/examples/packages/core.tsx
+++ b/packages/docs/src/components/examples/packages/core.tsx
@@ -2,56 +2,40 @@ import {
   ProseMirror,
   ProseMirrorProps,
 } from '@site/src/components/editor/prose-mirror';
-import { EditorState, Plugin } from 'prosemirror-state';
-import React, { useState } from 'react';
+import { EditorState } from 'prosemirror-state';
+import React, { useRef, useState } from 'react';
 import { Schema } from 'prosemirror-model';
-import {
-  edybaraBaseNodes,
-  edybaraCorePlugins,
-  edybaraBasicKeymapPlugins,
-  edybaraDropCursorPlugins,
-  edybaraGapCursorPlugins,
-  edybaraHistoryPlugins,
-  edybaraVirtualCursorPlugins,
-} from '@edybara/core';
+import { edybaraBaseNodes, edybaraCorePlugins } from '@edybara/core';
 import {
   edybaraParagraphNodes,
   edybaraParagraphPlugins,
 } from '@edybara/paragraph';
+import { edybaraDevkitCodeMirrorPlugins } from '@edybara/devkit';
 
-const schema = new Schema({
-  nodes: {
-    ...edybaraBaseNodes(),
-    ...edybaraParagraphNodes(),
-  },
-});
+export const CoreExample = (props: ProseMirrorProps) => {
+  const schema = useRef(
+    new Schema({
+      nodes: {
+        ...edybaraBaseNodes(),
+        ...edybaraParagraphNodes(),
+      },
+    }),
+  );
 
-const plugins: Plugin[] = [
-  ...edybaraParagraphPlugins({
-    nodeType: schema.nodes['paragraph'],
-  }),
-  ...edybaraCorePlugins(),
-  // ...edybaraBasicKeymapPlugins(),
-  // ...edybaraHistoryPlugins(),
-  // ...edybaraVirtualCursorPlugins(),
-  // ...edybaraDropCursorPlugins(),
-  // ...edybaraGapCursorPlugins(),
-];
+  const plugins = useRef([
+    ...edybaraParagraphPlugins({
+      nodeType: schema.current.nodes['paragraph'],
+    }),
+    ...edybaraCorePlugins(),
+    ...edybaraDevkitCodeMirrorPlugins(),
+  ]);
 
-export const CoreExample = (props: ProseMirrorProps) => {
   const [state] = useState(
     EditorState.create({
-      schema: schema,
-      plugins: plugins,
+      schema: schema.current,
+      plugins: plugins.current,
     }),
   );
 
-  return (
-    <ProseMirror
-      state={state}
-      style={{ height: '300px' }}
-      className="border"
-      {...props}
-    />
-  );
+  return <ProseMirror state={state} {...props} />;
 };
diff --git a/packages/docs/src/components/examples/packages/preset.tsx b/packages/docs/src/components/examples/packages/preset.tsx
index aa259783..1bde698f 100644
--- a/packages/docs/src/components/examples/packages/preset.tsx
+++ b/packages/docs/src/components/examples/packages/preset.tsx
@@ -3,22 +3,26 @@ import {
   ProseMirrorProps,
 } from '@site/src/components/editor/prose-mirror';
 import { EditorState } from 'prosemirror-state';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { edybaraPresetSchema, edybaraPresetPlugins } from '@edybara/preset';
 import doc from '@site/src/pages/lorem-ipsum.json';
 import { Node } from 'prosemirror-model';
-
-const schema = edybaraPresetSchema();
-const plugins = edybaraPresetPlugins({
-  schema,
-});
+import { edybaraDevkitCodeMirrorPlugins } from '@edybara/devkit';
 
 export const PresetExample = (props: ProseMirrorProps) => {
+  const schema = useRef(edybaraPresetSchema());
+  const plugins = useRef([
+    ...edybaraPresetPlugins({
+      schema: schema.current,
+    }),
+    ...edybaraDevkitCodeMirrorPlugins(),
+  ]);
+
   const [state] = useState(
     EditorState.create({
-      doc: Node.fromJSON(schema, doc),
-      schema: schema,
-      plugins: plugins,
+      doc: Node.fromJSON(schema.current, doc),
+      schema: schema.current,
+      plugins: plugins.current,
     }),
   );
 
diff --git a/packages/docs/src/css/custom.scss b/packages/docs/src/css/custom.scss
index 7a2ffe0f..7204e15d 100644
--- a/packages/docs/src/css/custom.scss
+++ b/packages/docs/src/css/custom.scss
@@ -2,6 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
+@import '@edybara/devkit/styles/devkit.scss';
 @import '@edybara/preset/styles/preset.scss';
 
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@@ -76,6 +77,12 @@ body {
   overflow: hidden;
 }
 
+.markdown {
+  .edybara-view-editor-root {
+    height: 500px;
+  }  
+}
+
 .edybara-root {
   width: 100%;
   border-radius: 8px;
diff --git a/packages/docs/tsconfig.json b/packages/docs/tsconfig.json
index d5a83a4c..5f1b6fde 100644
--- a/packages/docs/tsconfig.json
+++ b/packages/docs/tsconfig.json
@@ -19,6 +19,7 @@
       "@edybara/emoji": ["../emoji/src/index.ts"],
       "@edybara/heading": ["../heading/src/index.ts"],
       "@edybara/command": ["../command/src/index.ts"],
+      "@edybara/devkit": ["../devkit/src/index.ts"],
       "@edybara/hr": ["../hr/src/index.ts"],
       "@edybara/paragraph": ["../paragraph/src/index.ts"],
       "@edybara/flat-list": ["../flat-list/src/index.ts"],
diff --git a/packages/tables/src/components/cell-button.ts b/packages/tables/src/components/cell-button.ts
index afbe0038..f2e59ebb 100644
--- a/packages/tables/src/components/cell-button.ts
+++ b/packages/tables/src/components/cell-button.ts
@@ -1,5 +1,10 @@
 import { html, EdybaraSelect } from '@edybara/ui';
 import { Fragment } from 'preact';
+import { EditorView } from 'prosemirror-view';
+
+export interface EdybaraTableCellButtonWrapperProps {
+  editorView: EditorView;
+}
 
 export const EdybaraTableCellButtonWrapper = () => {
   return html`
diff --git a/packages/tables/src/node-views/table-node-view.ts b/packages/tables/src/node-views/table-node-view.ts
index 57194ed0..c8bf7422 100644
--- a/packages/tables/src/node-views/table-node-view.ts
+++ b/packages/tables/src/node-views/table-node-view.ts
@@ -3,7 +3,78 @@ import { EditorView, NodeView } from 'prosemirror-view';
 import { html } from '@edybara/ui';
 import { createRef, render } from 'preact';
 import { forwardRef, useImperativeHandle, useRef } from 'preact/compat';
-import { updateColumnsOnResize } from 'prosemirror-tables';
+
+/**
+ * @public
+ */
+interface CellAttrs {
+  colspan: number;
+  rowspan: number;
+  colwidth: number[] | null;
+}
+
+/**
+ * @public
+ */
+function updateColumnsOnResize(
+  node: PMNode,
+  colgroup: HTMLTableColElement,
+  table: HTMLTableElement,
+  cellMinWidth: number,
+  overrideCol?: number,
+  overrideValue?: number,
+): void {
+  let totalWidth = 0;
+  let fixedWidth = true;
+  let nextDOM = colgroup.firstChild as HTMLElement;
+  const row = node.firstChild;
+
+  if (!row) {
+    return;
+  }
+
+  // const cols: {
+  //   colspan: number;
+  //   colwidth: number[] | null;
+  // }[] = [];
+
+  for (let i = 0, col = 0; i < row.childCount; i++) {
+    const { colspan, colwidth } = row.child(i).attrs as CellAttrs;
+    for (let j = 0; j < colspan; j++, col++) {
+      const hasWidth =
+        overrideCol == col ? overrideValue : colwidth && colwidth[j];
+      const cssWidth = hasWidth ? hasWidth + 'px' : '';
+      totalWidth += hasWidth || cellMinWidth;
+      if (!hasWidth) {
+        fixedWidth = false;
+      }
+      if (!nextDOM) {
+        const colElement = document.createElement('col');
+        colElement.style.width = cssWidth;
+        colgroup.appendChild(colElement);
+      } else {
+        if (nextDOM.style.width != cssWidth) {
+          nextDOM.style.width = cssWidth;
+        }
+        nextDOM = nextDOM.nextSibling as HTMLElement;
+      }
+    }
+  }
+
+  while (nextDOM) {
+    const after = nextDOM.nextSibling;
+    nextDOM.parentNode?.removeChild(nextDOM);
+    nextDOM = after as HTMLElement;
+  }
+
+  if (fixedWidth) {
+    table.style.width = totalWidth + 'px';
+    table.style.minWidth = '';
+  } else {
+    table.style.width = '';
+    table.style.minWidth = totalWidth + 'px';
+  }
+}
 
 export interface EdybaraTableViewRef {
   colgroup: () => HTMLTableColElement;
diff --git a/packages/tables/src/plugins/cell-button.ts b/packages/tables/src/plugins/cell-button.ts
index 341024bd..929afe96 100644
--- a/packages/tables/src/plugins/cell-button.ts
+++ b/packages/tables/src/plugins/cell-button.ts
@@ -1,5 +1,5 @@
 import { Plugin as PMPlugin, PluginKey } from 'prosemirror-state';
-import { Decoration, DecorationSet } from 'prosemirror-view';
+import { Decoration, DecorationSet, EditorView } from 'prosemirror-view';
 import { findCellClosestToPos } from '../utils';
 import { EdybaraTableCellButtonWrapper } from '../components';
 import { render } from 'preact';
@@ -8,8 +8,13 @@ import { html } from '@edybara/ui';
 export const tableCellButtonPluginKey = new PluginKey('tableCellButtonPlugin');
 
 export const edybaraTableCellButtonPlugins = (): PMPlugin[] => {
+  let view: EditorView;
   const plugin: PMPlugin<DecorationSet> = new PMPlugin<DecorationSet>({
     key: tableCellButtonPluginKey,
+    view: (editorView) => {
+      view = editorView;
+      return {};
+    },
     state: {
       init() {
         return DecorationSet.empty;
@@ -32,7 +37,10 @@ export const edybaraTableCellButtonPlugins = (): PMPlugin[] => {
             render(null, wrapper);
           },
         });
-        render(html`<${EdybaraTableCellButtonWrapper} />`, wrapper);
+        render(
+          html`<${EdybaraTableCellButtonWrapper} editorView=${view} />`,
+          wrapper,
+        );
         return DecorationSet.create(tr.doc, [deco]);
       },
     },
diff --git a/packages/tables/src/schemas/schema.ts b/packages/tables/src/schemas/schema.ts
index c74992a9..7ff041a2 100644
--- a/packages/tables/src/schemas/schema.ts
+++ b/packages/tables/src/schemas/schema.ts
@@ -16,7 +16,7 @@ export interface CellAttributes {
   background: string | null;
 }
 
-export interface CellAttrs {
+interface CellAttrs {
   colspan: number;
   rowspan: number;
   colwidth: number[] | null;
diff --git a/yarn.lock b/yarn.lock
index c038b477..e9109289 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1708,6 +1708,99 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@codemirror/autocomplete@npm:^6.0.0":
+  version: 6.15.0
+  resolution: "@codemirror/autocomplete@npm:6.15.0"
+  dependencies:
+    "@codemirror/language": "npm:^6.0.0"
+    "@codemirror/state": "npm:^6.0.0"
+    "@codemirror/view": "npm:^6.17.0"
+    "@lezer/common": "npm:^1.0.0"
+  peerDependencies:
+    "@codemirror/language": ^6.0.0
+    "@codemirror/state": ^6.0.0
+    "@codemirror/view": ^6.0.0
+    "@lezer/common": ^1.0.0
+  checksum: 10c0/bd4005a6a765dcf0132925f8050e088760d69ee1876dcec936e423609610fc35d60de3a9cdab017d330cef991fd0eb1fdb68d958aacc442fa7a191d593eaee35
+  languageName: node
+  linkType: hard
+
+"@codemirror/commands@npm:^6.0.0":
+  version: 6.3.3
+  resolution: "@codemirror/commands@npm:6.3.3"
+  dependencies:
+    "@codemirror/language": "npm:^6.0.0"
+    "@codemirror/state": "npm:^6.4.0"
+    "@codemirror/view": "npm:^6.0.0"
+    "@lezer/common": "npm:^1.1.0"
+  checksum: 10c0/0b8384e54232c4046a6a1a4fd56081b2040eb072f678b4f6918f0f792c2c66b52540938b7c7cc766e1f9d5173ab0c57707ff486fa351ed60540471ad7ce7dfdd
+  languageName: node
+  linkType: hard
+
+"@codemirror/lang-json@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "@codemirror/lang-json@npm:6.0.1"
+  dependencies:
+    "@codemirror/language": "npm:^6.0.0"
+    "@lezer/json": "npm:^1.0.0"
+  checksum: 10c0/c70301ba43d44dbd1ff0ccab6ec6e3fb9825d61d4854b4839441a8144a9c96997acdad16d93199d157308dd80088a5e9f14b66f395c7e79f4dadc6b4e70ce8a8
+  languageName: node
+  linkType: hard
+
+"@codemirror/language@npm:^6.0.0":
+  version: 6.10.1
+  resolution: "@codemirror/language@npm:6.10.1"
+  dependencies:
+    "@codemirror/state": "npm:^6.0.0"
+    "@codemirror/view": "npm:^6.23.0"
+    "@lezer/common": "npm:^1.1.0"
+    "@lezer/highlight": "npm:^1.0.0"
+    "@lezer/lr": "npm:^1.0.0"
+    style-mod: "npm:^4.0.0"
+  checksum: 10c0/b910b7be491d3c73389e31d54a6910ad82b35f8ba7a7a48048ea949d881a16e261789b133bee7d458bc5cb1a14eaa2e18f50ac643da17a29d9323d346d3f2a74
+  languageName: node
+  linkType: hard
+
+"@codemirror/lint@npm:^6.0.0":
+  version: 6.5.0
+  resolution: "@codemirror/lint@npm:6.5.0"
+  dependencies:
+    "@codemirror/state": "npm:^6.0.0"
+    "@codemirror/view": "npm:^6.0.0"
+    crelt: "npm:^1.0.5"
+  checksum: 10c0/5180cc4c56bf8da78d9e506c3f4d281108194103c050a9babd1304bc50a91085d99616cd19cc9fae3c0d55a3288ab5112c1cb4b4b52c4fd032d6396954b0abd8
+  languageName: node
+  linkType: hard
+
+"@codemirror/search@npm:^6.0.0":
+  version: 6.5.6
+  resolution: "@codemirror/search@npm:6.5.6"
+  dependencies:
+    "@codemirror/state": "npm:^6.0.0"
+    "@codemirror/view": "npm:^6.0.0"
+    crelt: "npm:^1.0.5"
+  checksum: 10c0/4bb8ca46d105e4b7eb5830c65abc61302f5cc86f0118c5ad3f0fe72d2a7f7309a7394eba8c784a8ac152569e16003f6edf3d69a7da6dac0c7abe96fe5395ed9b
+  languageName: node
+  linkType: hard
+
+"@codemirror/state@npm:^6.0.0, @codemirror/state@npm:^6.4.0, @codemirror/state@npm:^6.4.1":
+  version: 6.4.1
+  resolution: "@codemirror/state@npm:6.4.1"
+  checksum: 10c0/cdab74d0ca4e262531a257ac419c9c44124f3ace8b0ca1262598a9218fbb6fd8f0afeb4b5ed2f64552a9573a0fc5d55481d4b9b05e9505ef729f9bd0f9469423
+  languageName: node
+  linkType: hard
+
+"@codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0":
+  version: 6.26.0
+  resolution: "@codemirror/view@npm:6.26.0"
+  dependencies:
+    "@codemirror/state": "npm:^6.4.0"
+    style-mod: "npm:^4.1.0"
+    w3c-keyname: "npm:^2.2.4"
+  checksum: 10c0/588a2bfea04a3cd36a6af46da29965726e05031b05d41c20094023cf33f3c086a3ca66f86e2269e09c4e30b52b1b284b6c10af3343c3b772b6371171d41448c2
+  languageName: node
+  linkType: hard
+
 "@colors/colors@npm:1.5.0":
   version: 1.5.0
   resolution: "@colors/colors@npm:1.5.0"
@@ -2400,6 +2493,33 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@edybara/devkit@npm:*, @edybara/devkit@workspace:packages/devkit":
+  version: 0.0.0-use.local
+  resolution: "@edybara/devkit@workspace:packages/devkit"
+  dependencies:
+    "@codemirror/lang-json": "npm:^6.0.1"
+    "@codemirror/state": "npm:^6.4.1"
+    "@edybara/ui": "npm:*"
+    codemirror: "npm:^6.0.1"
+    preact: "npm:^10.20.1"
+    prosemirror-commands: "npm:*"
+    prosemirror-dropcursor: "npm:*"
+    prosemirror-gapcursor: "npm:*"
+    prosemirror-history: "npm:*"
+    prosemirror-inputrules: "npm:*"
+    prosemirror-keymap: "npm:*"
+    prosemirror-model: "npm:*"
+    prosemirror-state: "npm:*"
+    prosemirror-transform: "npm:*"
+    prosemirror-utils: "npm:*"
+    prosemirror-view: "npm:*"
+    rimraf: "npm:^5.0.5"
+    sass: "npm:^1.69.5"
+    tsup: "npm:^8.0.1"
+    typescript: "npm:^5.2.2"
+  languageName: unknown
+  linkType: soft
+
 "@edybara/emoji@npm:*, @edybara/emoji@workspace:packages/_wip_emoji":
   version: 0.0.0-use.local
   resolution: "@edybara/emoji@workspace:packages/_wip_emoji"
@@ -3121,6 +3241,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@lezer/common@npm:^1.0.0, @lezer/common@npm:^1.1.0, @lezer/common@npm:^1.2.0":
+  version: 1.2.1
+  resolution: "@lezer/common@npm:1.2.1"
+  checksum: 10c0/af61436dc026f8deebaded13d8e1beea2ae307cbbfb270116cdedadb8208f0674da9c3b5963128a2b1cd4072b4e90bc8128133f4feaf31b6e801e4568f1a15a6
+  languageName: node
+  linkType: hard
+
+"@lezer/highlight@npm:^1.0.0":
+  version: 1.2.0
+  resolution: "@lezer/highlight@npm:1.2.0"
+  dependencies:
+    "@lezer/common": "npm:^1.0.0"
+  checksum: 10c0/d4312f95b78e4b6f10833b1cf99601c6381c22b755bbf60fd61d6fe9b4cf7780650e2e2dadf75beb8d94824dcb5ec81da5cfc9ca54122688a482e488103105aa
+  languageName: node
+  linkType: hard
+
+"@lezer/json@npm:^1.0.0":
+  version: 1.0.2
+  resolution: "@lezer/json@npm:1.0.2"
+  dependencies:
+    "@lezer/common": "npm:^1.2.0"
+    "@lezer/highlight": "npm:^1.0.0"
+    "@lezer/lr": "npm:^1.0.0"
+  checksum: 10c0/a84283b4e4ded682b5e90a068c52155deaeac79e8dc16da0e9904e72633be029a00ad2da26daa259e503ae3b116722985c3e15d9448336e5f0fde59f79b716ad
+  languageName: node
+  linkType: hard
+
+"@lezer/lr@npm:^1.0.0":
+  version: 1.4.0
+  resolution: "@lezer/lr@npm:1.4.0"
+  dependencies:
+    "@lezer/common": "npm:^1.0.0"
+  checksum: 10c0/1e3af297cc142bb6676cb3c4e1bd310da2e93b53273cf745dc85d839a08e1d3cbbd67e0fc0322a480cf25ee215fefe967c53bc2af3ddf5d9b1bf267081dfa164
+  languageName: node
+  linkType: hard
+
 "@mdn/browser-compat-data@npm:^5.2.34, @mdn/browser-compat-data@npm:^5.3.13":
   version: 5.5.15
   resolution: "@mdn/browser-compat-data@npm:5.5.15"
@@ -5420,6 +5576,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"codemirror@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "codemirror@npm:6.0.1"
+  dependencies:
+    "@codemirror/autocomplete": "npm:^6.0.0"
+    "@codemirror/commands": "npm:^6.0.0"
+    "@codemirror/language": "npm:^6.0.0"
+    "@codemirror/lint": "npm:^6.0.0"
+    "@codemirror/search": "npm:^6.0.0"
+    "@codemirror/state": "npm:^6.0.0"
+    "@codemirror/view": "npm:^6.0.0"
+  checksum: 10c0/219b0f6ee91d373380fba2e0564a2665990a3cdada0b01861768005b09061187c58eeb3db96aef486777b02b77b50a50ee843635e3743c47d3725034913c4b60
+  languageName: node
+  linkType: hard
+
 "collapse-white-space@npm:^2.0.0":
   version: 2.1.0
   resolution: "collapse-white-space@npm:2.1.0"
@@ -5744,6 +5915,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"crelt@npm:^1.0.5":
+  version: 1.0.6
+  resolution: "crelt@npm:1.0.6"
+  checksum: 10c0/e0fb76dff50c5eb47f2ea9b786c17f9425c66276025adee80876bdbf4a84ab72e899e56d3928431ab0cb057a105ef704df80fe5726ef0f7b1658f815521bdf09
+  languageName: node
+  linkType: hard
+
 "cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3":
   version: 7.0.3
   resolution: "cross-spawn@npm:7.0.3"
@@ -6289,6 +6467,7 @@ __metadata:
     "@edybara/codeblock": "npm:*"
     "@edybara/command": "npm:*"
     "@edybara/core": "npm:*"
+    "@edybara/devkit": "npm:*"
     "@edybara/emoji": "npm:*"
     "@edybara/flat-list": "npm:*"
     "@edybara/flat-task-list": "npm:*"
@@ -11868,6 +12047,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"preact@npm:^10.20.1":
+  version: 10.20.1
+  resolution: "preact@npm:10.20.1"
+  checksum: 10c0/3834f00d663c6ab90ddbfd618b7eee8612c5b4c0a2953d283b2b749340b5cc0c9efa91d70583ba6a5f65a641a87257c5bb3b414d9ad1bfb9eab5468c978b19d3
+  languageName: node
+  linkType: hard
+
 "prelude-ls@npm:^1.2.1":
   version: 1.2.1
   resolution: "prelude-ls@npm:1.2.1"
@@ -13753,6 +13939,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"style-mod@npm:^4.0.0, style-mod@npm:^4.1.0":
+  version: 4.1.2
+  resolution: "style-mod@npm:4.1.2"
+  checksum: 10c0/ad4d870b3642b0e42ecc7be0e106dd14b7af11985e34fee8de34e5e38c3214bfc96fa7055acea86d75a3a59ddea3f6a8c6641001a66494d7df72d09685e3fadb
+  languageName: node
+  linkType: hard
+
 "style-to-object@npm:^0.4.0":
   version: 0.4.4
   resolution: "style-to-object@npm:0.4.4"
@@ -14681,7 +14874,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"w3c-keyname@npm:^2.2.0":
+"w3c-keyname@npm:^2.2.0, w3c-keyname@npm:^2.2.4":
   version: 2.2.8
   resolution: "w3c-keyname@npm:2.2.8"
   checksum: 10c0/37cf335c90efff31672ebb345577d681e2177f7ff9006a9ad47c68c5a9d265ba4a7b39d6c2599ceea639ca9315584ce4bd9c9fbf7a7217bfb7a599e71943c4c4