FormCraft Renderer 🎨✨

FormCraft Renderer is a lightweight, zero-dependency vanilla JavaScript library designed to render beautiful, fully-themed forms exported from the FormCraft Builder.

If you've built a form using the FormCraft visual builder, this is the package you need to display it on your website or web application. It handles everything: rendering the inputs, applying the beautiful CSS themes you chose, validating the data, and handling the form submission!

🚀 Features

• Zero Dependencies: Written in vanilla JavaScript. No heavy frameworks required.
• Framework Agnostic: Works beautifully with raw HTML, React, Angular, Vue, Next.js, and more.
• Built-in Theming Engine: Ships with 20+ premium CSS themes (Glassmorphism, Neobrutalism, Cyberpunk, Minimalist, Corporate, etc.).
• Automatic Validation: Handles required fields, min/max lengths, and email patterns out of the box with zero config.
• Tiny Footprint: Extremely small bundle size, fast to load, and easy to use.

📦 Installation

You can install formcraft-renderer via npm:

npm install formcraft-renderer

Or, if you aren't using a bundler and just want to drop it into an HTML file, use the jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/formcraft-renderer/src/renderer.js"></script>

💻 How to Use

Using FormCraft Renderer is incredibly simple. All you need is the JSON schema you copied from the FormCraft Builder and an empty HTML <div> to mount the form into.

1. Pure HTML / Vanilla JS

<!-- The container where the form will magically appear -->
<div id="my-form-container"></div>

<!-- Include the library -->
<script src="https://cdn.jsdelivr.net/npm/formcraft-renderer/src/renderer.js"></script>

<script>
  // 1. Paste the schema you exported from the FormCraft builder
  const mySchema = {
    theme: "glass-ethereal",
    fields: [
      { id: "name", type: "text", label: "Full Name", validation: { required: true } }
    ]
  };

  // 2. Render the form!
  FormCraft.render({
    target: '#my-form-container',
    schema: mySchema,
    onSubmit: (formData) => {
      console.log('Yay! The form was submitted:', formData);
      
      // Here you can send the data to your backend, e.g. using fetch()
      // fetch('/api/contact', { method: 'POST', body: JSON.stringify(formData) });
    }
  });
</script>

2. React / Next.js

import { useEffect, useRef } from 'react';
import FormCraft from 'formcraft-renderer';

// Paste your exported schema here
const mySchema = { /* ... */ };

export default function MyContactForm() {
  const formRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // We only want to render it once the container is in the DOM
    if (formRef.current) {
      FormCraft.render({
        target: formRef.current,
        schema: mySchema,
        onSubmit: (data) => alert(JSON.stringify(data))
      });
    }
  }, []);

  return <div ref={formRef} />;
}

3. Vue 3

<template>
  <div ref="formRoot"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import FormCraft from 'formcraft-renderer';

const formRoot = ref(null);
const mySchema = { /* ... */ };

onMounted(() => {
  if (formRoot.value) {
    FormCraft.render({
      target: formRoot.value,
      schema: mySchema,
      onSubmit: (data) => console.log('Submitted data:', data)
    });
  }
});
</script>

4. Angular

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import FormCraft from 'formcraft-renderer';

@Component({
  selector: 'app-contact-form',
  standalone: true,
  template: '<div #formRoot></div>'
})
export class ContactFormComponent implements AfterViewInit {
  @ViewChild('formRoot') formRoot!: ElementRef;
  
  schema = { /* ... paste schema ... */ };

  ngAfterViewInit() {
    FormCraft.render({
      target: this.formRoot.nativeElement,
      schema: this.schema,
      onSubmit: (data) => console.log('Submitted data:', data)
    });
  }
}

🎨 Changing Themes

You don't need to write any CSS to change the look of your form. The form appearance is entirely driven by the theme property inside your JSON schema.

Just update the theme string in your schema object to immediately transform the design!

Available themes: glass-ethereal, glass-ocean, glass-frost, neo-yellow, neo-pink, neo-mint, neo-mono, cyber-neon, cyber-matrix, cyber-outrun, min-light, min-dark, min-paper, min-clay, corp-blue, corp-slate, corp-emerald, corp-indigo, modern-sunset, modern-lavender, modern-earth.

🤝 Need Help?

FormCraft is an ongoing project. If you find bugs or have feature requests, please check the main repository issues page!

Happy Form Building! 📝✨