diff --git a/editor-components/todo/assets/decap-cms/editor-components/todo.js b/editor-components/todo/assets/decap-cms/editor-components/todo.js
new file mode 100644
index 0000000..7fcebc5
--- /dev/null
+++ b/editor-components/todo/assets/decap-cms/editor-components/todo.js
@@ -0,0 +1,57 @@
+export default {
+  // Internal id of the component
+  id: "todo",
+  // Visible label
+  label: "Todo",
+  // Fields the user need to fill out when adding an instance of the component
+  fields: [
+    {
+      name: 'done',
+      label: 'Done',
+      widget: 'boolean'
+    },
+    {
+      name: 'title',
+      label: 'Title',
+      widget: 'string'
+    }
+  ],
+  // Regex pattern used to search for instances of this block in the markdown document.
+  // Patterns are run in a multline environment (against the entire markdown document),
+  // and so generally should make use of the multiline flag (`m`). If you need to capture
+  // newlines in your capturing groups, you can either use something like
+  // `([\S\s]*)`, or you can additionally enable the "dot all" flag (`s`),
+  // which will cause `(.*)` to match newlines as well.
+  //
+  // Additionally, it's recommended that you use non-greedy capturing groups (e.g.
+  // `(.*?)` vs `(.*)`), especially if matching against newline characters.
+  pattern: /^\-\s*\[([\sx])\]\s*(.+?)$/ms,
+  // Given a RegExp Match object
+  // (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match#return_value),
+  // return an object with one property for each field defined in `fields`.
+  //
+  // This is used to populate the custom widget in the markdown editor in the CMS.
+  fromBlock: function (match) {
+    console.log(match,{
+      done: match[1] === 'x',
+      title: match[2]
+    })
+    return {
+      done: match[1] === 'x',
+      title: match[2]
+    };
+  },
+  // Given an object with one property for each field defined in `fields`,
+  // return the string you wish to be inserted into your markdown.
+  //
+  // This is used to serialize the data from the custom widget to the
+  // markdown document
+  toBlock: function (data) {
+    return `- [${data.done?'x':' '}] ${data.title}`;
+  },
+  // Preview output for this component. Can either be a string or a React component
+  // (component gives better render performance)
+  toPreview: function (data) {
+    return `<p><input ${data.done?' checked':''} disabled type="checkbox">${data.title}</p>`;
+  }
+}
diff --git a/editor-components/todo/go.mod b/editor-components/todo/go.mod
new file mode 100644
index 0000000..e3ebfe9
--- /dev/null
+++ b/editor-components/todo/go.mod
@@ -0,0 +1,5 @@
+module github.com/decap-cms/editor-components/todo
+
+go 1.21.3
+
+require github.com/hugomods/decap-cms v0.4.0 // indirect
diff --git a/editor-components/todo/go.sum b/editor-components/todo/go.sum
new file mode 100644
index 0000000..b6b3045
--- /dev/null
+++ b/editor-components/todo/go.sum
@@ -0,0 +1,2 @@
+github.com/hugomods/decap-cms v0.4.0 h1:DGUWeog+IlQaNXsd5Vm3esoqzy/K66lpQwEVP3lT28c=
+github.com/hugomods/decap-cms v0.4.0/go.mod h1:P9gUtk59PZYBCNVIqiovRPqI13WiKkutMtJl2YQLkMA=
diff --git a/editor-components/todo/hugo.toml b/editor-components/todo/hugo.toml
new file mode 100644
index 0000000..3840d23
--- /dev/null
+++ b/editor-components/todo/hugo.toml
@@ -0,0 +1,2 @@
+[[module.imports]]
+path = "github.com/hugomods/decap-cms"