Drag and Drop Form Builder

[jarredwitt]

Hi all,

Been using dnd-kit for some time now and love it. Wanted to show off the form builder that I've been working on. Would be happy to answer any questions and also very accepting of any feedback 😀.

Screen.Recording.2022-03-01.at.1.18.52.PM.mov

[clauderic]

This is super cool @jarredwitt, nice work 💯

I think a lot of people would benefit from seeing what the source code looks like if you ever have time to share (either specific or general approach).

[io-josna]

I need a Two Column Row field that is draggable and droppable. a row which has two columns in it and each column should act as drop targets. how to achieve it using react js functional component

[eric-mathison]

That looks really nice. How are you handling the 'cloning' of the draggable? I'm currently at a road block trying to use a dragoverlay.

[jarredwitt]

@eric-mathison sorry for the delay! So for the elements sidebar items I treat them like a "vending machine" in that each item has a unique id assigned to it that is used for the drag overlay and then is reused when the draggable is over a droppable. In the onDragOver event I check to see if I'm dragging an element when that event fires and if so I add it to my fields array using the same Id that was assigned to it (that's where the cloning takes place since I'm using the same id). The vending machine part occurs when I update a unique key that causes all the elements in the sidebar to re-render so they get new unique Id's (they are pretty simple elements for the most part so the re-render isn't a killer on perf). That is handled through a simple useState hook and the key prop:

const [key, setKey] = useState(Date.now());
...

const onDragEnd = () => {
  ...
  setKey(Date.now());
};
..

return (
  <DragContext ...>
  <ElementsSidebar key={key} .... />
  ...
  </DragContext>
)

[JakubKontra]

Hi @jarredwitt any progress on this? I need something like this, so maybe i could help you. :-)

[KayTeeChan]

Hi @jarredwitt I am confused with the 'cloning' and I am a junior developer, do you have time to make a small example in the code sandbox? Thank you very much!!!

[jarredwitt]

Hi all,

I’ll start working on a code sandbox example this week(not able to share the actual code from the example above) and post it here when finished. It’ll be simplified, but I’ll make sure that it demonstrates how I’m handling the cloning from the sidebar to the canvas.

[jarredwitt]

Hi All,

Here's a link to the sandbox example.

https://codesandbox.io/s/dnd-kit-form-builder-fii0zh

It's not prod ready at all, but it at least shows the process that was used in the screen grab above. Be happy to answer any questions.

Also more than willing to hear feedback on design approach as well.

[nprange]

Hello Jarred,
I was testing your example and if I drag an item from the sidebar to the droppable area, but cancel the process, move it back to the sidebar, and drop it in the sidebar, I'm unable to drag the same item again.
Do you have any idea what's happening?

If the item is not dragged to the droppable area, everything continues to work.

[jarredwitt]

Hi @nprange,

Thanks for pointing out the bug in the sandbox! I went back through and realized that I was reusing the same Id twice which makes the DnDContext upset because there is technically two items in the context with the same Id (the draggable from the sidebar and the spacer in the sortable canvas).

I've updated the code to fix the bug. Look at the handleDragOver handler for the comments.

[beeirl]

That's really nice, gj @jarredwitt! Have you thought of adding a 2 column layout for some form elements as well?

[mustafamoe]

Great work!!, are you willing to share the source code :) ?!

[jarredwitt]

Thanks @MainAdc95. Unfortunately I can’t share the source to that specific project, but the sandbox link above follows the same architecture(at a basic level) as the original screen capture. If you have some questions that that sandbox doesn’t answer then I’d be happy to provide some help.

[nprange-philips]

Hello Jarred, great work!
Can you explain how you lock the vertical axis only for the Canvas draggable items? I tried to use the modifier restrictToVerticalAxis, but if I put it on the DndContext or DragOverlay, the items from the sidebar are restricted but those from the Canvas are not.

[jarredwitt]

Hi @nprange-philips,

Apologize for the delay. For the locking it's just CSS. The canvas div that SortableContext wraps has the following class:

.canvas {
  flex: 1;
  border: 1px solid black;
  margin: 50px;
  border-radius: 5px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow-y: auto;
}

It's children are the sortable fields and they all have their width set to 100%. The CSS means the items within the canvas are only able to move vertically.

Hope that answers your question, if not feel free to add some context or a screen grab and I'll take a look.

[K444L]

Hi Jarred,

There is a little bug in your sandbox example. When you drag a sidebar field to the canvas from the top, the spacer appears at the bottom. When you drop it, it drops from the top, which is expected, but do you have any idea why the spacer appears at the bottom?

[jarredwitt]

Hi @K444L,

Thanks for the bug report. So the issue is due to the way the styling is setup for the canvas. On https://codesandbox.io/s/dnd-kit-form-builder-fii0zh?file=/src/app.js:3064-3094 we look for the over index that the sidebar item is over and try to insert there. That part of the code is actually working as expected, but the canvas does have some padding in it's styling. So the first over we detect is the canvas due to the padding and not the sortable field item. If you comment out https://codesandbox.io/s/dnd-kit-form-builder-fii0zh?file=/src/app.js:3064-3094 and https://codesandbox.io/s/dnd-kit-form-builder-fii0zh?file=/src/app.js:3064-3094 it starts behave better.

There are still some cases where the spacer gets inserted at the bottom which are probably style related as well, but those were the two I could pick out quickly.

[K444L]

Hi Jarred,

Thanks for the reply! But which lines should I comment out to make it behave better? You provided the same link for both lines.

[jarredwitt]

@K444L apologize for that. The two lines are:

Lines 53 and 61 of styles.css.

https://codesandbox.io/s/dnd-kit-form-builder-fii0zh?file=/src/styles.css:677-694
https://codesandbox.io/s/dnd-kit-form-builder-fii0zh?file=/src/styles.css:796-813

[GradySain]

Hi Jarred,

This is great work- thanks so much for sharing with the community. I love dnd-kit, but it's a vast library with (unfortunately) not so easy to follow documentation. Your example is helping me with my own project, where I have a similar (but not exactly the same) setup.

Similarities:

• drag from left sidebar to "drop zone"
• items on left do not disappear once dragged or or dropped, they can be re-used
• dragging over drop zone automatically sorts new items
• once dropped into drop zone, items can be sorted

Differences:

• all items in sidebar are "generic" items with common properties (there's no concept of different "types" of items, just different versions of the same item type)
• items in sidebar must pass all their properties to the drop zone

I got pretty far with my own initial attempts to build my setup, and got stuck on making the sorting "auto-animate" when new items are being dragged into the drop zone. Now that I see your code, I can tell I was doing some things that may be fundamentally wrong.

Your App.js core architecture (and subsequent children) has a different structure than mine, and I think I need to re-factor mine to work similarly. You have the Sortable Context in App.js, I had mine in a child component (my drop zone). I think the real difference, however, is the two modes you have for Drag Overlay. I only have one... I do not have a clear understanding of Drag Overlay, and how it works with useSortable / Sortable Context.

I know it doesn't make much sense to anyone stumbling on this comment at this time. I need to provide some code to reference here. I'll be working on a scaled down version of your approach that I will eventually build back up for production. I will post some results here, and probably add it to a new discussion. In the meantime I just wanted to say thanks, and that your source code has given me hope!

[mehdifadaei-irn]

Hi Jarred,

how you learn to work with dndkit their doc is bad
i am beginner in react can you give me your source code of this to i learn from your code please !

[PikaYuhno]

The source code is available here:
https://codesandbox.io/s/dnd-kit-form-builder-fii0zh

[yaniswav]

Great example thank you. However I have a question.

Why in the example, in Canvas.js we can do this for the useDroppable hook
const { attributes, listeners, setNodeRef, transform, transition } = useDroppable({ id: "canvas_droppable", data: { parent: null, isContainer: true } });

but in Typescript, I get

Property 'attributes' does not exist on type '{ active: Active | null; rect: MutableRefObject<ClientRect | null>; isOver: boolean; node: MutableRefObject<HTMLElement | null>; over: Over | null; setNodeRef: (element: HTMLElement | null) => void; }'.ts(2339) const attributes: any

[jarredwitt]

Hi @yaniswav looks like that's an oversight by me and one of the disadvantages of not using TS for this example. attributes is not actually returned from useDroppable which is why you're seeing the error. You can remove it from the useDroppable return and the type error should disappear.

[yaniswav]

Hello @jarredwitt,

Thank you really much for you answer! :)
I was a little confused about that. I'm a junior developer learning Typescript and React and for my first project, and I'm using dnd-kit.

Since the documentation is not very complete for a junior developer (I find) I came across your example by chance (even if I use typescript it helps me a lot). The code that you made is a base for me to learn how to use the library. I'm joining @GradySain for the similarities, that's really cool that you made that.

Thank you ! 😊

[yaniswav]

Hi again, @jarredwitt

I came across your code and I noticed a variable called draft that is declared but not used in the App.tsx file. I'm curious if this is intentional or if there is some other part of the codebase where this variable is being used. I'm not entirely sure if this is intentional or if there is some other part of the codebase where this variable is being used.

Here is the code I'm referring to:

const [data, updateData] = useImmer({
  fields: []
});

// ...

updateData((draft) => {
  draft.fields.splice(index, 1, createSpacer({ id: active.id }));
});

It seems like draft should be a variable that is used to make mutations to the data object without directly modifying it. However, I'm not seeing any use of this variable in this code.

Could you explain if this is a mistake or if draft is being used somewhere else in the codebase? I'm just curious to understand what the purpose of this variable is.

Thanks for your time!

[jarredwitt]

@yaniswav great question. So that is a hook for a state library called Immer. The hook is from here.

TheuseImmer hook is similar to the useState hook from React in that it's able to do functional updates. So the draft variable is the "current state" that's being passed to the update function and is only available within that function.

You are correct in that draft is used to make mutations to the data object without "directly" modifying it, but it's a bit more complex than that. useState state is treated as immutable so when you update the state that's created from a useState hook you return a whole new state value instead of modifying the current state value. Immer uses proxies to do state updates. So when you're updating state from a useImmer hook you can treat the state as mutable and modify it directly which is why in the above example you see that I'm splicing the fields array directly on the draft (would be a no-no if I was using useState).

Hopefully that short explanation helps. Proxies could be a little out there for a junior dev who's just starting out, but they're quite fun to play around with 🤠.

[yaniswav]

Thank you so much @jarredwitt for your detailed explanation about the useImmer hook and how it works. Your explanation was very helpful and clarified my understanding of the topic. I appreciate the time you took to answer my question and provide additional information about the Immer library and how it handles state updates. I'm looking forward to experimenting with proxies and learning more about their capabilities. Thanks again for your help!

Moreover, I have a follow-up question regarding drag and drop functionality. When I drag an item and it becomes a drag overlay, I've noticed that in the console it always appears as if the item is over the droppable area, regardless of its actual location. Is this behavior expected, and if so, can you explain why this is happening?

[laurent512]

Hi, this is great job here !
If one day you make it work multiple containers ( so Sidebar + Container A + Container B), I would really investigate it !
I have a use case where elements need to slide from container A to container B (and the opposite)

[jpliraa]

Hi all,

Been using dnd-kit for some time now and love it. Wanted to show off the form builder that I've been working on. Would be happy to answer any questions and also very accepting of any feedback 😀.

Screen.Recording.2022-03-01.at.1.18.52.PM.mov

What kind of database do you use to achive the store of the new information form? it needs to be a non-relational?....thanks you!

[jarredwitt]

@jpliraa we use Postgres and store some of the field config as JSONB. As usual it depends on your setup and how unique each field configuration is. An example of something simple using Postgres would be:

forms
- id
- name
- description
- fields <- could be JSONB or has-many relationship to a form_field table

form_fields (if you're not using a JSONB column in the forms table)
- id
- form_id
- order
- type <- Used to infer the type of field and render appropriately
- config <- JSONB column

That's a really simple example, but will get you pretty far I think in terms of how to get started with the storage layer.

[benjamin-nguyen]

Hi @jarredwitt, great stuff!

I am currently working on implementing a grid layout system that allows users to have draggable components within multiple columns to your current sandbox example. Essentially, users should be able to drag and drop a grid layout container and have the flexibility to edit the number of columns that container has. Additionally, they should be able to drag other fields into that container.

I would greatly appreciate it if you could provide me with guidance or point me in the right direction to achieve this functionality.
Specifically, I would like to know:

• How can I implement a draggable grid layout system that allows users to create multiple columns within a container?
• What would be the best approach to handle the drag and drop functionality for the components within the grid layout?
• How can I enable users to edit the number of columns in the grid layout container dynamically?

If you could possibly provide code examples, it would be incredibly helpful.

[jarredwitt]

@benjamin-nguyen take a look here.

That's an older example I threw together for an older version of dnd-kit, but the overall concept and implementation should be mostly the same with the later versions. I think that answers you first two bullet points somewhat.

As far as editing the number of columns dynamically, that's a deeper question and there's definitely multiple ways to handle it. If you want to add more columns then it could be as easy as adding an element with a type of "column" to your state. You can see that in the linked example where you can add a column or an item. Also in the linked example above you'll see that I have some constraints defined for rows and containers. You can possibly follow that logic to implement some constraints for your grid container.

Hopefully the two provided examples can get you what you need. If not I'll be happy to answer more questions if you have any or if you want to point to me some code I can take a look.

[benjamin-nguyen]

Thanks @jarredwitt!

I've reviewed the older example you shared, and it seems to align with what I'm trying to achieve in terms of the draggable grid layout system.

I was wondering if you have an updated sandbox of the implementation of the nested containers sandbox within the form builder example you gave,

How would the drag and drop nested containers look like here?
https://codesandbox.io/s/dnd-kit-form-builder-fii0zh

[jarredwitt]

Hi all, due to the amount of interest this discussion has generated I've been toying with the idea of creating some content that shows how to build something similar to the form builder that was first posted to this discussion. I want to divide the content up into two courses that would build on each other.

The first course would show how to build out the basic form builder along with the elements sidebar, simple properties panel, styling and preview capability. It would basically take the codesandbox example posted above and extend it to look more like the posted video grab that started this discussion. The end result of the course would be a basic form builder that you can extend. This course will be free and posted to youtube as playlist series.

The second course would build on top of the first and would show off the following:

• Adding complex form elements such as the signature and address component in the original video.
• Advanced element properties such as styling and element specific options.
• Theming.
• Adding sections (for all of you that are asking about how to add multiple containers this would be it).
• Advance form previews for different platforms (desktop, tablet and mobile).
• Persisting the form to a db.
• Capturing submissions from the form and persisting to a db.
• Whatever else I can think or the community would suggest 😃.

The end result of the second course would be a full featured form builder that's capable of creating forms, capturing form submissions and viewing those submissions. Planning on using NextJS, TS, MUI and SQLite. This would be a much larger undertaking than the first course so I'm planning on making this course available for a one time fee. I haven't decided what that fee will be or where it will be hosted, but I'll be sure to update this discussion with future details.

In the meantime so I can gauge interest, add a 👍 to this post if you think something like the above sounds beneficial. More than happy to hear any feedback as well.

[TotomInc]

This is an awesome idea. I found the dnd-kit docs not so easy to follow and understand. They are great for very simple use-cases, but there's still a gap between simple & advanced use-cases with the current documentation.

[taziksh]

Any updates 👀

[Sliffcak]

updates?

[vidimitrov]

Hey @jarredwitt any updates on this? I am mostly curious about the "persisting to a db" as I couldn't find any official guidelines from the dnd kit library...

[jarredwitt]

@vidimitrov apologize for the silence on this. As usual you make an announcement on something with best laid plans and then life gets in the way. My company has hit a growth spurt and I haven't had the time available to dedicate to this. I still have a goal of making the content, but until that happens I'll try my best to answer to any questions that come up here.

As for the DB persistence, you probably won't find any official guidance since everyone's use case on that is going to be quite a bit different. Using the codesandbox link in this discussion, you'll end up with an object that looks this when the data is converted to JSON.

[{"id":"wNtiY8NVebTdHEHY4kfli","type":"input","name":"input1","parent":null},
{"id":"iE5sMFqVdpCoOUo375PLl","type":"select","name":"select2","parent":null},
{"id":"EKVEXySlHMmdbFUtYGmUY","type":"textarea","name":"textarea3","parent":null},
{"id":"JFQLm4b_K49HTzDh4dOdK","type":"button","name":"button4","parent":null}]

The easiest method to do here would be to send this entire JSON payload to your backend and then from there decide how you want to parse it out to be persisted. For us the answer was simple - we just used a Postgres JSONB column and stored the entire definition there along with some other columns for identification such as name, description and version (we use version to allow us to roll back to previous versions of the form). Storing the entire definition in a single column allows us to easily "rehydrate" the builder for changes later. We also use that same definition to render to form for the user so that it can be filled out.

Hopefully that helps, but if not let me know and we can dive deeper.

[WolfOfTheNorth]

Hey @jarredwitt.

There's a bug where if one of the elements are larger (like text in your example) and you try and put it between smaller items (like two buttons). The detection does not work properly and its finicky to get the large item placed in between the two. Using collisionDetection={closestCenter} in DndContext mostly fixes the issue but causes another issue (Items from the sidebar will automatically go straight into the canvas. I was wondering if there was a solution to fix this?

[io-josna]

I need a Two Column Row field that is draggable and droppable. a row which has two columns in it and each column should act as drop targets. how to achieve it using react js functional component

[AmreeshTyagi]

I think this link is already mentioned above. A good example of drop-able Row and column. You can create 2-3-4 column with this approach.
https://codesandbox.io/s/dnd-kit-nested-containers-kvdgn?file=/src/app.js

[RafaelCENG]

Hello first of all thanks jarred for the code. I managed to refactor it a bit to make my own.

For now I have the dnd and the sorting.
As you can guys see on my screenshot im trying to things. First to make it draggable only from the dots and make pressable the expand and the fields inside. Any tips? If i make only the dots draggable i guess the rest will be ok but i cant pass the refs i need inside this function

export function Field(props) {
  const { field, overlay, ...rest } = props;
  const { type } = field;

  const Component = getRenderer(type);

  console.log({ Component });

  return (
    <Box
      sx={{ width: "100%" opacity: overlay ? 0.5 : 1 }}
    >
      <Component {...rest} />
    </Box>
  );
}

[RafaelCENG]

I managed to make it work. I can press the expand button. My only problem now I want to make the dragging only possible from the drag icon on the left

[jarredwitt]

@RafaelCENG here's a link to the documentation for the drag listeners since it's a little buried https://docs.dndkit.com/api-documentation/draggable/usedraggable#listeners.

Basically what you would do is attach those listeners to the drag handle you want to use. Take a look here https://codesandbox.io/p/sandbox/dnd-kit-form-builder-fii0zh?file=%2Fsrc%2Fsidebar.js%3A34%2C1-35%2C1 for an example.

[RafaelCENG]

Thanks i made it by passing listeners and attributes as props. Is it possible you know why im getting this error when im dragging?
ResizeObserver loop completed with undelivered notifications.

[jarredwitt]

@RafaelCENG not without seeing the code. If you've got a codesandbox link available I'd be happy to take a look.

[RafaelCENG]

I will try to make a sandbox probably hard. But I mainly followed this video
https://www.youtube.com/watch?v=QGXUUXy0AMw without the prisma and everything else just the dnd

[Mookusamy]

Hi all,

Been using dnd-kit for some time now and love it. Wanted to show off the form builder that I've been working on. Would be happy to answer any questions and also very accepting of any feedback 😀.
Screen.Recording.2022-03-01.at.1.18.52.PM.mov

Hi Jarred Witt, can you please give the exact code for dnd form builder. Because i want integrate the exact form builder like this

[danjfaulkner]

It would be a massive help, the documentation for dndkit is awful