ProseMirror Dev Tools

Hi,

For the past couple of weeks I’ve been working on a project which I believe can improve developer experience for everyone who uses ProseMirror as a base for their editors.

Past week my team put some effort during our 20% time to polish and prepare project to be open sourced and published to npm.

And today we are happy to show you what we’ve made:

GitHub Repo: https://github.com/d4rkr00t/prosemirror-dev-tools NPM: https://www.npmjs.com/package/prosemirror-dev-tools Demo: https://codepen.io/iamsysoev/full/QvpELv/

I want to mark that project in it early stage we’ve tested it for a couple of days internally, but i bet there are hole bunch of issues we are not aware of.

If somebody feels like helping us – we are happy to accept pull requests, ideas or bug reports.

18 Likes

This is really nice! I was just talking last week about how making things easily observable can hugely improve the development and debugging experience, and this is a great example of that. Especially the visualization of transactions has great potential.

1 Like

Thank you :slight_smile:

@d4rkr00t This is awesome, I’ll definitely be playing around with it!

Thanks, I’d love to hear some feedback after you played with it.

One thing I missed is being able to see selection changes in the history view. Selection transactions just say that the docs didn’t change. You could also include the current active marks somewhere there.

Yeah, i thought about selections in history view as well.

Active marks is a great idea. Thanks!

This is really useful! Thanks for making & releasing it. :slight_smile:

Thank you for the feedback :slight_smile:.

Late to the party…but this is so cool!