
Show HN: ShapeForm – Schema Driven Forms for React - mcat
https://github.com/TakeShape/shape-form
======
asprouse
Andrew from TakeShape here! The primary author of this library. We tired a
number of different form libraries before settling on writing our own. You can
check out a full talk I gave on ShapeForm
([https://www.youtube.com/watch?v=iplY8Le1zK0](https://www.youtube.com/watch?v=iplY8Le1zK0))
or you can just read my slides ([https://shape-form-
talk.netlify.com/](https://shape-form-talk.netlify.com/)) from the talk.

ShapeForm has several nice features that make it perfect for our use case, and
may yours:

JSON Schema validation - Easily share the same form validation frontend and
backend

️ Fast - Pure components for fast rendering even with large forms

Redux / Standalone state management - Choose your own adventure

Custom widgets - Widgets are simply React components

Form reducers - Useful for async validation, data normalization, the sky's the
limit.

If you find ShapeForm useful or want to make it more useful I'd love for you
to contribute to the project!

~~~
latchkey
Oi! Thanks for this. Really great work. Forms and Data tables are two major
sore points for me in react land. I've been wanting to see something with json
schema other than the mozilla project (which as you said, has weird
dependencies).

Any reason for not building around react-final-form as a basis? So far, I've
found that one to be my favorite. Zero dependencies and tiny (especially
compared with the alternatives).

[https://github.com/final-form/react-final-form](https://github.com/final-
form/react-final-form)

I couldn't easily find a demo of your stuff, but one thing they've really
gotten right is the renders for field updates...

[https://final-form.org/docs/react-final-
form/examples/subscr...](https://final-form.org/docs/react-final-
form/examples/subscriptions)

------
polskibus
How does shapeform compare to [https://github.com/mozilla-services/react-
jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form)

~~~
patrickaljord
There is also [https://frontier-forms.dev](https://frontier-forms.dev)
inspired by react-jsonschema-form. It generates forms based on your graphql
schema with types in typescript. It is pretty cool too. Based on final-form.

Author talks about it here
[https://www.youtube.com/watch?v=Ovg9CYwWFBM&t=6s](https://www.youtube.com/watch?v=Ovg9CYwWFBM&t=6s)

------
mmonihan
It's great to see more libraries that deal with rendering JSONSchema. I've
been working on a drag and drop formbuilder / grid [0] for creating crud apps
that leverages react-jsonschema-form.[1]

I noticed that while I create custom rails apps for clients, they often want
to create additional forms and still leverage the authentication, permissions,
and existing data in the app. This rules out most 3rd party form builders like
typeform, jotform etc. which are mostly for surveys anyway. Sometimes the dev
time to create them(UI, DB migrations, testing, validations) is too costly for
an idea they just want to test.

So, I use the builder to create a JSON Schema, then embed the form into the
rails app. What's cool is that I can utilize permissions from the core app to
disable certain fields, and I can pass in enum values so drop downs have up-
to-date options pulled right from the DB.

We use react-jsonschema-form, but the jsonschema we produce could be used in
any of the tools mentioned in this thread.

I'm close to opening this up to other devs soon, and would love your feedback.
There's a signup form on the website if you're interested.

[0] [https://responsevault.com/](https://responsevault.com/) [1]
[https://github.com/mozilla-services/react-jsonschema-
form](https://github.com/mozilla-services/react-jsonschema-form)

~~~
Edmond
Signed up for alpha. Definitely sparked my curiosity regarding the type of
client needs you encounter for things like form builders.

We are currently working on our own visual app builder, starting out with
Vue/Vuetify. Demo:

[https://youtu.be/6ywDYebcxdo](https://youtu.be/6ywDYebcxdo)

[https://youtu.be/jdb0j_vN9RM](https://youtu.be/jdb0j_vN9RM)

------
nathan_f77
Wow this looks awesome! I've been using Alpaca.js [1] at FormAPI [2], which is
also a JSON Schema form builder. This looks much better, and much easier to
customize, since I already use React / Redux / React DnD for other parts of
the application. I was also looking at react-jsonschema-form, but agree with
all the downsides they mentioned in the talk (hard to customize, requires
Bootstrap, hard to use with Redux, etc.)

So I think I will definitely switch to ShapeForm in the future, and I was
actually planning to build something like this myself. I'm definitely looking
forward to the TypeScript support.

[1] [http://www.alpacajs.org](http://www.alpacajs.org)

[2] [http://formapi.io](http://formapi.io)

------
factorialboy
I like it. I moved away from react (and all other frameworks) but I wish I had
this 4 years ago when I was exclusively building react apps.

------
kevinmobrien
This is pretty darned cool. Really strong example of how to walk through a set
of slides exploring why to build a new form library, too.

------
throw03172019
Looks nice! Our forms have a lot of logic where certain answers hide/show
other fields/sections. Does this have the ability to swap the schema/form
fields on the fly?

~~~
bogdanu
JSON schema has in one of it's drafts a way to define business rules like
these, no idea if this library supports it (most likely not)

On a previous project I needed something like this and used react-json-schema
as a form renderer and created my own rule engine that evaluated a lot of
rules defined in a custom format I needed.

The result was a generated schema that was rendered by react-json-schema.

------
mrccc
Also check out uniforms [0] which integrates nicely with other Schema
libraries

[0] [https://github.com/vazco/uniforms](https://github.com/vazco/uniforms)

~~~
latchkey
No hooks (yet). Just starting to figure out typescript.

Should just base this project around [https://final-
form.org/react](https://final-form.org/react)

------
siempreb
Sorry to say, but it looks deprecated already. ES6, pure components,
redux(without hooks), etc.. It's sad, but JS community is just moving too
fast. We build things for today, not tomorrow..

------
breck
Disclosure: I work on Tree Notation.

Down the line (maybe in 2020) you might want to consider looking at using Tree
Notation instead of JSONSchema. Could simplify things quite a bit.

Here's what that might look like, using your example on your Readme:

[http://treenotation.org/designer/#grammar%0A%20shapeFormNode...](http://treenotation.org/designer/#grammar%0A%20shapeFormNode%0A%20%20description%20Exploring%20what%20Shape%20form%20https%3A%2F%2Fgithub.com%2FTakeShape%2Fshape-
form%20could%20look%20like%20as%20a%20tree%20language.%0A%20%20root%0A%20%20catchAllNodeType%20abstractFieldNode%0A%20anyCell%0A%20%20highlightScope%20string%0A%20typeCell%0A%20%20enum%20string%20boolean%0A%20%20highlightScope%20constant.numeric.integer%0A%20keywordCell%0A%20%20highlightScope%20keyword%0A%20abstractKeywordNode%0A%20%20abstract%0A%20%20firstCellType%20keywordCell%0A%20abstractFieldNode%0A%20%20abstract%0A%20%20firstCellType%20keywordCell%0A%20%20inScope%20abstractKeywordNode%0A%20fullNameNode%0A%20%20inScope%20titleNode%20typeNode%0A%20%20extends%20abstractKeywordNode%0A%20titleNode%0A%20%20catchAllCellType%20anyCell%0A%20%20extends%20abstractKeywordNode%0A%20typeNode%0A%20%20cells%20typeCell%0A%20%20extends%20abstractKeywordNode%0A%20emailNode%0A%20%20inScope%20titleNode%20typeNode%20formatNode%0A%20%20extends%20abstractKeywordNode%0A%20formatNode%0A%20%20cells%20anyCell%0A%20%20extends%20abstractKeywordNode%0A%20newsletterNode%0A%20%20inScope%20titleNode%20typeNode%0A%20%20extends%20abstractKeywordNode%0Asample%0A%20fullName%0A%20%20title%20Full%20Name%0A%20%20type%20string%0A%20email%0A%20%20title%20Email%0A%20%20type%20string%0A%20%20format%20email%0A%20newsletter%0A%20%20title%20Sign%20up%20for%20our%20newsletter%0A%20%20type%20boolean)

