Getting Started Vite

Getting started with Vite

Let's create from scratch a Vite project with LetsForm.

Start scaffolding an empty Vite project with

npm create vite@latest my-letsform-app -- --template react

Now enter the project folder and select which UI library you wish to use, LetsForm uses the native components of the supported UI libraries (i.e. React, RSuite, AntD, etc), each library has a different build

cd my-letsform-app

Install LetsForm

npm i lets-form -D

then try a simple form with just one text field (or use the LetsForm Designer (opens in a new tab) to create one)

src/App.jsx

import React from 'react';
import LetsForm from 'lets-form/react;
 
// copied and pasted from LetsForm Designer
const MY_FORM = {
  "$schema": "https://unpkg.com/lets-form/schemas/react/form.json",
  "version": 1,
  "layout": "vertical",
  "validationMode": "onSubmit",
  "fluid": true,
  "fields": [
    {
      "component": "input-text",
      "label": "My Field",
      "name": "my_field"
    }
  ],
  "name": "Simplest example"
};
 
const App = () => {
  return (
    <LetsForm
      form={MY_FORM}
      // or onChange
      onSubmit={values => {
        alert(JSON.stringify(values, null, 2))
      }}
    />
  );
};
 
export default App;

Now launch the Vite server

npm run dev

and point the browser to http://localhost:5173/, you should see something like

Try to fill in the form and click "Submit", then inspect the values returned by onChange and onSubmit callbacks.

Now it's the time to try LetsForm Designer (opens in a new tab) for more complex forms!