Using @hilla/form in a standalone Lit 2.0 app

[VanTigranyan]

Vote to prioritize: add a 👍 reaction to help the community and maintainers prioritize this issue.

Tell us about your request

Hi. Didn't find any place to ask questions about Hilla, so I hope this will not bother you guys too much. We want to use @hilla/form in our application that is built using Lit 2.0, and we wanted to know if we can use this library without the Java(backend) part. We already have an API built with node, and the application contains a lot of our custom components, so we really just need a library that would supercharge our massive forms to make it easier to work with. I would appreciate any insight here. Thanks in advance.

[jouni]

Hi! Thanks for the question. I’ll let @platosha answer this one.

For future, you can use the Vaadin Discord chat for these type of question. There’s a dedicated channel/forum for Hilla: https://discord.com/channels/732335336448852018/1009205986646560909

[VanTigranyan]

Thanks, @jouni. For the future I will register in Discord, I don't have an account yet.

[VanTigranyan]

@platosha Hi. Can you provide any information that could help, please?

[platosha]

@VanTigranyan Hi, thanks for asking! Sadly this use case is not something we prioritized, so this ended up being not quite straightforward.

What you would need first is to declare form models describing the JSON data structures of your forms. With Java backend, these are generated automatically from Java classes, but you could also write them manually.

Here is some generic info about Hilla form models and the primitives provided. Additionally, please look at the test fixture models, they are more up-to-date, and you could find examples of declaring arrays, referencing other objects, etc. here: https://github.com/vaadin/hilla/blob/main/packages/ts/form/test/TestModels.ts

Once you have declared a model class, you can then follow the same client-side Form binding steps: import it in your Lit form view component, use it to instantiate a Binder, and then use the binder instance to bind the components with the ${field()} directive in the template.

As for submitting the form then, see the saving data article for how to provide the submission callback. You can use a regular async JS function that takes the JSON data as a first argument as a submission callback, something like:

async function savePerson(data: Person): Promise<void> {
  let response;
  try {
    response = await fetch('/api/person', {method: 'POST', body: JSON.stringify(data) });
  } catch(e) {
    throw new Error('Network connection failed');
  }
  // Note: fetch does not assert that response is OK. Make sure to check and throw if response is a server error.
  if (!response.ok) {
    throw new Error('Error when saving data');
  }
}

[jouni]

I think we should keep this issue open, as it seems this is worth documenting officially.