Hi, sorry if this is a stupid question. It’s been a very long time since I did any frontend work. I have a really simple website that’s just pure javascript and some simple JQuery stuff for get/post calls (literally just one html file). I would like to add collaborative text editing to my textarea and text inputs, and ProseMirror seems like a really nice project.
I looked at the prosemirror-example-setup and it looks like it requires npm, so it is a node.js project, but is written in typescript? Is there a way I can add ProseMirror to my simple javascript/HTML page? If so, could someone point me to any examples I can see on how to do that?
If not, can you guys recommend what I need to do to integrate ProseMirror? I’d be willing to learn a new js framework. Do I need to learn Typescript, or convert my single page to a node.js project? Reading over the Intro, I’m not really clear on what tech stack is required for ProseMirror and thus what I need to start learning first.
If you just want a drop-in text editor, ProseMirror by itself requires quite a lot of code to get going. You might want to look at TipTap, which is ProseMirror bundled up in an easy to use package.
ProseMirror’s strength is deep customisation. If you plan to do a lot of that, it’s probably to avoid TipTap and go direct to the real thing.
And no you don’t need a JS framework, or even Typescript. But as you spotted you do need a way to use NPM modules in the browser. Personally I find Vite the best option these days.
Prosemirror uses npm, but it’s not meant to run in a node.js environment; in fact, it will probably fail since it has references to window.document in a lot of places. Instead it simply uses npm as a package manager.
I did some digging, but I don’t think Prosemirror is on a cdn, so I’m not sure if there’s a way you can just download the compiled build output of the library anywhere without using npm.
But for modern frontends, npm is generally used to manage packages anyway. You don’t have to learn typescript either. Create a new folder, run npm init, then npm install prosemirror-view prosemirror-state …. And then you can start using them in some js files import { EditorView } from “prosemirror-view”
Also, if you want to completely just avoid the nightmare that is frontend build tooling, you can just use an in-browser IDE like replit or codesandbox. Here’s a template I have setup for prosemirror: prosemirror-template - CodeSandbox
I believe you can export the whole project from there too, so that’s another way you can set it up.
Anyway, I hope this didn’t come off condescending; I didn’t want to assume what you did and didn’t know and hope it was helpful.