Feature idea: field picker panel based on JSON schema

[mihaistoie]

Hello,

The editor is wonderful — congratulations for the great work!

I am using docxtemplater to generate documents by merging JSON data with a DOCX template.
The data model is known, and for each model I already have a JSON Schema describing the data.

For example, for the "Personal" model I have this schema:

{
  "type": "object",
  "properties": {
    "firstName": {
      "type": "string",
      "title": "First name"
    },
    "lastName": {
      "type": "string",
      "title": "Last name"
    },
    "addresses": {
      "type": "array",
      "title": "Addresses",
      "items": {
        "type": "object",
        "properties": {
          "country": {
            "type": "string",
            "title": "Country"
          }
        }
      }
    }
  }
}

Example data:

{
  "firstName": "John",
  "lastName": "DOE",
  "addresses": [
    { "country": "USA" },
    { "country": "France" }
  ]
}

When creating a DOCX template I write:

First Name: {firstName}
Last Name: {lastName}
{#addresses}
{country}
{/addresses}

---

My idea

I would like to create a plugin that adds a panel listing the available fields (using the schema titles).

For example, instead of manually typing {firstName}, I would click in the panel on "First Name" and it would insert {firstName} at the cursor position.

---

Question

Do you think this is possible to implement as a plugin?
Do you have any advice or recommended approach for doing this?

[jedrazb]

Hey @mihaistoie thank you for nice words! This is doable as a plugin. Sth like claude code / cursor should be able to get you far with the implementation, steps:

Create a new UI plugin (similar to our existing template plugin at src/plugins/template/) that:

• Takes a JSON Schema as input — via file upload, paste, or passed as a prop
• Parses it into a flat list of fields with their display names (walking properties recursively, handling type: "array" for loops)
• Renders a clickable field tree in a side panel (the EditorPlugin interface already supports left/right panels with resizing built in)
• When you click a field, it inserts the corresponding docxtemplater syntax at the cursor — {firstName} for simple fields, {#addresses}...{/addresses} blocks for arrays

The nice part is you don't need to worry about the low-level insertion logic — just dispatch a ProseMirror transaction to insert the text, and the existing template plugin will automatically pick up the new tags and highlight them.

Files worth looking at to get started:

• src/plugin-api/types.ts — the EditorPlugin interface your plugin needs to implement
• src/plugins/template/index.ts — working example of a UI plugin with a side panel
• src/plugin-api/PluginHost.tsx — how panels get rendered
• examples/plugins/docxtemplater/src/App.tsx — example usage of the template system

Happy to help if you run into any questions along the way!

[mihaistoie]

Thank you for your answer. It’s a good starting point.

[erophames]

What you're effectively looking for is almost like a mail merge feature, this will be pretty resource intesive on the frontend as it would basically require building an lexer/ast tree.