Form Editor

NoCode form builder built with Svelte and Tailwindcss
Alternatives To Form Editor
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
14 hours ago20mitPHP
Admin panel, form builder and table builder for Laravel. Built with the TALL stack. Designed for humans.
Tailwindcss Forms2,968529a month ago46September 02, 20224mitHTML
10 hours ago2otherTypeScript
Open Source Experience Management Solution
Flowbite Svelte70412a day ago291November 14, 202250mitSvelte
Official Svelte components built for Flowbite and Tailwind CSS
Tall Forms60617 months ago120March 11, 20226mitPHP
Laravel Livewire (TALL-stack) form generator with realtime validation, file uploads, array fields, blade form input components and more.
3 months ago5mitJavaScript
Vue form components with server-side validation in mind
Laravel Form Components239
12 hours ago70October 20, 2022mitPHP
Form components built for Tailwind & Livewire.
a year ago11January 08, 2022mitJavaScript
Basic UI components for Tailwind CSS.
Instagram Clone66
3 days ago16TypeScript
Instagram 2.0 with REACT.JS! (Next.js, TypeScript, NextAuth.js v4.17.0, Tailwind CSS, Firebase v9, Framer Motion, Image Uploading, Google Authentication,, Instagram Profile)
Laravel Casts5712 years ago137September 15, 202021mitPHP
Form builder for Laravel.
Alternatives To Form Editor
Select To Compare

Alternative Project Comparisons

Form Builder With Svelte & Tailwindcss

NoCode Customizable Form Editor


Demo Form Builder


Form Builder Fouita

Form builder Fouita

Form builder Fouita


  • Customize text and inputs (WYSIWYG)
  • Multi Steps Forms
  • Customize colors
  • RTL support
  • Add images and videos by inserting a link inside the text
  • Form Schema is exported so you can manipulate the data yourself
  • Form data is dispatched when user click on the Submit of the last step


npm i @fouita/form-editor

How to use

Inside your svelte app

  import FormEditor from "@fouita/form-editor"

  // you can create a button to toggle the editable variable
  let editable = true

  // initial form schema needed
  let form =  {
    "name": "My Form",
    "version": "1",
    "steps": [{
        "index": 0,
        "props": {
            "previousBtn": "Back",
            "nextBtn": "Next"
        "inputs": [

  const settings = {
	  textColor: "250 250 250",
	  bgColor: "0 0 0",
	  outlineColor: "165 180 252",
	  buttonBgColor: "79 70 229",
	  buttonTextColor: "255 255 255",
	  borderColor: "200 200 200",
	  form: form,
	  rounded: "rounded-none",
	  size: "full",
	  rtl: false,
	  transparent: false,
	  btnsPosition: "start", // start, end, center

  // get updated data
  $: if(form) {
    // form is updated

  function handleSubmit(evt) {
    // send data to your server

<FormEditor bind:form {editable} {...settings} on:submit={handleSubmit} />

Generate CSS

To be able to see the styled Editor, you can either use form-editor.css in your index.html or you can build the CSS using tailwind

  1. Copy the file tailwind.config.js
  2. Generate a seperate CSS for the Form Editor using the following command in your project
npx tailwindcss -i ./src/global.css -o ./public/form-editor.css --minify

( change global.css to your css file that includes @tailwind)


@tailwind base;
@tailwind components;
@tailwind utilities;

Include the file in your HTML index file

<link rel="stylesheet" href="/form-editor.css" />

Use it as widget

You can use the form-editor in your project as an external widget, with backend data collection at Fouita for Free

Popular Tailwindcss Projects
Popular Form Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Form Builder