This is an experiment (think home cooked meal) to help with building integrations between APIs.

When building integrations between APIs one is often faced with stichting those apis together and transforming the data.

• Situation: You have some source json, from some APIs/webhooks and some target json how I need to send it out
• Complication: I need to transform it and re-map the fields. Depending on the complexity of the objects that might require some fiddling
• Solution: I'd love a visual data mapper that allows me to
  • see the source and target spec
  • example values maybe even API descriptions
  • create simple transformation with Type/Javascript, JSONata, JQ, JMESpath or similar
  • connect the target and source values visually
  • documentation - the visual aspect is important to help readers, as this is easier to understand/digest the integration, not only "build" it. Also it serves as a kind of todo-list. It's easy to see if something isn't mapped yet

• Ballerina Data Mapper - Data Mapper is pretty spot on, but is ballerina, a language I'm not familiar with yet. Does this exist for Javascript?
• many are code first/only like JOLT
• https://www.postman.com/product/flows/ - can this do object mapping or only "steps" of the flow? It seems to only work by exposing paramaters. I can't really map complicated json objects quickly
• JSONCrack great visualization, but i don't understand how the "compare data" works and whether it would help with mapping/transforming

• make the transformation editable

• Apply the transformation live

• Deploy to github pages https://janmechtel.github.io/schema-bridge/

• test it with easy stuff recreate the sample from Ballerina data mapper

• add a new component "editor" that for now only contains the textarea, the content should be 2-way bound from the app.vue

• add a target area

• better editor (json syntax highlighting etc. using Monaco)

• show a diff between transformation output and target

• refactor the diff editor into it's own component

• easy way to import & export everything

• visual mapping (without editing)

  • show a list of source & target fields
  • show a list of transformation fields
  • show a table with 3 columns "source" "target" "transformation"
  • use vue diagram editor

• UI collapse, resize the editors more freely

• filtering (only show fields that are mapped or not mapped)

• test/support arrays - How to deal with their type?

• visualization: selecting a row highlights back to the code edit areas? can everything stay in one line?

• work with OpenAPI spec

  • support for descriptions types and required fields

• QAL: register jsonata as language

• enable editing in the visual part

VSCode + Volar (and disable Vetur).

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

See Vite Configuration Reference.

npm install

npm run dev

npm run build

npm run deploy

npm run lint