A form editor and viewer

Show
1

Hi everyone, I’ve open-sourced my project Kameo and would like to get some thoughts from PM community.

Kameo is a toolkit for creating and rendering interactive web forms in rich text content.

Screenshot
Screenshot1200×771 45.6 KB

This is a work in progress, but you can clone the repo to try it out in the dev-playground or if you follow the installation process.

Any comments are appreciated!

GitHub repo

2 Likes
2

Looks neat! Thanks for publishing that.

1 Like
3

Neat indeed :slight_smile:

I will read the code in the repo.

Thanks for sharing!

1 Like
4

Thank you!

@hyprdia, found your first comment in the email about the motivation for developing a form inside a text editor and will try to answer this question.

I got this idea when I was playing with node views and realized that it is a powerful tool that allows to represent many things. I’ve seen small examples with inputs or using a PM editor as part of a form, but I haven’t found anything more.

And then I wanted to try to implement an open-source form editor/viewer that could be integrated into any environment. No dependencies on third-party form services, no iframes and no frontend framework dependencies.

Since the form editor works together with rich text, this makes it very flexible (for instance, in terms of form design) and opens up other possibilities (I will present some ideas later).

Also Kameo can start on the server too (with jsdom). For example, you can create a form like this on the server, get json on the frontend and render it using Kameo as well.

const atEnd = kameo.state.doc.content.size;
kameo
  .chain()
  .insertContentAt(atEnd, '<h1>Basic form</h1><p>This is a <b>basic</b> form</p>')
  .insertFormInputName(atEnd)
  .insertFormInputEmail(atEnd)
  .insertFormTextarea(atEnd)
  .insertFormRating(atEnd)
  .insertFormSubmit(atEnd)
  .run();

There is still a lot of unknown here and I don’t know how far I will go, but I like to experiment there.

5

Very nice! In Fidus Writer we have document templates with a JS template editor. The template editor itself does not contain ProseMirror, but it outputs a ProseMirror document structure that when loaded in the text editor specifies a specific order of input elements. While it’s mainly being used for organizing richtext blocks like “abstract” and “body text”, etc., it was actually originally designed specifically to allow to create forms. So yes, forms in ProseMirror are a a great idea. Especially if you combine it with features like comments (as marks) that users can put on arbitrary parts of the forms or realtime collaborative editing - that’s something that a regular simple web forms are not able to do.

1 Like