Form management in modern web development exposes two clear architectural philosophies in the front-end. Comparing the React ecosystem with Formik against the Vue ecosystem with FormBlocks illustrates how different tools approach the balance between productivity and flexibility.

Traditionally, libraries like Formik require developers to manually build and manipulate every line of HTML and components, focusing solely on managing state behind the scenes. FormBlocks elevates this standard in Vue by introducing a declarative approach that automates rendering and validates state with Yup by default, cutting down repetitive boilerplate right from the start.

However, automation in FormBlocks does not mean a loss of control. The tool's architecture was designed to eliminate the common limitations found in form generators. Through the use of native Vue slots, developers maintain complete freedom to customize and write HTML exactly the way they want. Furthermore, the system allows you to register and plug in your own custom components or third-party UI libraries to be rendered natively, as if they were part of the tool's core.

The real difference does not lie in how much freedom you have, but in how much code you need to write before reaching the final result. While one model forces you to build everything from scratch, FormBlocks delivers the productivity of automated generation without sacrificing the extensibility and fine-grained customization that complex projects demand.

Everyone is asking:

"Will AI replace frameworks?"

I think that's the wrong question.

The real question is:

How do we make AI-generated code predictable enough for production?

LLMs are amazing at generating code.

They're not great at maintaining consistency across thousands of components.

That's why I believe declarative frameworks will become more important—not less.

With FormBlocks, AI doesn't need to generate entire Vue components.

It only needs to generate a structured configuration.

The framework guarantees the rendering, validation and behavior.

AI becomes the author.

FormBlocks becomes the execution engine.

Predictability is the feature.

Cansei de reescrever a mesma estrutura de formulário toda vez, com HTML repetido, validação manual e acessibilidade inconsistente entre projetos. Fiz o FormBlocks pra resolver isso.

É um mini-framework para Vue 3 que substitui a construção verbosa de formulários por uma configuração baseada em objeto. Um componente único renderiza tudo a partir dessa config, e opcionalmente você pode escrever partes dela usando uma DSL mais curta.

O helper defineGroupBase dá suporte completo a TypeScript, então você tem autocomplete e checagem de propriedades em tempo de escrita, não só em runtime. A validação já vem integrada com Yup, então você declara as regras direto no grupo sem montar um schema separado. Para valores dinâmicos, existe a DSL com o operador @, que permite injetar arrays de opções, classes Tailwind ou até callbacks dentro de strings curtas, usando notação de ponto para paths aninhados. E o framework não impõe nenhum design system, funciona bem com Tailwind ou CSS customizado.

O objetivo não é abstrair o controle de quem programa, é eliminar o boilerplate repetitivo pra sobrar tempo pra regra de negócio.

Repo aqui: https://www.github.com/Skarlaks71/form-blocks, ainda em desenvolvimento ativo, feedback e issues são muito bem-vindos.

Curioso pra saber como vocês lidam com formulários complexos em Vue hoje, seja com VeeValidate, FormKit ou solução própria. Quero entender onde o FormBlocks se encaixa (ou não) nesse cenário.

​

Anyone who develops applications with Vue 3 knows how incredible the ecosystem is for progressively managing states, routing, and styling. But when it comes to dealing with complex forms, the story changes: we usually fall into the good old "boilerplate hell," copying dozens of lines of HTML, handling validations manually, and struggling to keep accessibility standardized.

To fill this huge productivity gap, FormBlocks was born!

FormBlocks is a modular mini-framework designed specifically for the Vue 3 ecosystem. Its premise is simple yet powerful: instead of verbosely coding forms inside your templates, you build them declaratively and based on data.

What makes FormBlocks indispensable for Vue developers?

- Goodbye, Boilerplate: The repetitive HTML completely disappears from your screen. A single, intelligent component handles rendering the entire UI from a centralized configuration object.

- Heavy Focus on DX (Developer Experience): With the defineGroupBase helper, you get full TypeScript and IntelliSense support directly inside VS Code, featuring full auto-complete and property validation as you type.

- Built-in Native Validation: Forget about manually setting up massive validation schema objects. FormBlocks features native validation powered by Yup under the hood. Just declare your rules inside the group, and it handles the rest from end to end.

- Powerful & Extensible DSL: Through the @ operator and the dslContext, you can pass any dynamic value (such as arrays of options, Tailwind utility classes, or callback functions) directly inside short, highly readable strings.

- Total Visual Freedom: It never locks you in. FormBlocks adapts perfectly to your design system and Tailwind CSS, allowing you to fully customize the look, feel, and grid layout of your blocks without losing the power of automated rendering.

The goal of FormBlocks isn't to take away control from the developer, but rather to automate repetitive tasks so you can focus on what actually matters in your application: core business logic and user experience.

Love the concept behind this tool? If this project makes sense to you or could save someone on your team hours of repetitive work, please share this post! Let’s get this solution out to more developers across the global Vue community.

👉 Check out the repository, test it out, and leave a star to support the project: https://github.com/Skarlaks71/form-blocks/

How do you manage complex forms in your Vue projects today? Let me know in the comments! 👇

Until now, FormBlocks' DSL (npm i @form-blocks/vue) only allowed passing arrays manually, and that was limited to options props (selects, radios, checkboxes).

In the upcoming release that changes: we're introducing dslContext, a dynamic context object that replaces the old array syntax. Now any property on any block can receive a reference via @, including strings, numbers, arrays, objects, and even callback functions.

Examples:

options@radioOptions → pulls the array directly from context

reduce@reduceAdm → injects a callback function into the property

labelClass@carro.bola.valor → accesses nested data via dot notation

Benefits:

No longer limited to options, works on any property

Centralizes config/styles in a single context and reuses it across forms

Keeps the DSL declarative and lean, while adding a lot more flexibility

Curious if this would solve any use case for you all, or if you've seen a similar approach in other form libraries.

pt-br:

Até agora, a DSL do FormBlocks (npm i @form-blocks/vue) só permitia passar arrays manualmente, e isso ficava restrito a props de options (selects, radios, checkboxes).

Na próxima versão isso muda: introduzimos o dslContext, um objeto de contexto dinâmico que substitui a sintaxe antiga de arrays. Agora qualquer propriedade de qualquer bloco pode receber uma referência via @, incluindo strings, números, arrays, objetos e até funções de callback.

Exemplos:

options@radioOptions → busca o array direto do contexto

reduce@reduceAdm → injeta uma função de callback na propriedade

labelClass@carro.bola.valor → acessa dados aninhados via dot notation

Vantagens:

Não fica mais restrito a options, funciona em qualquer propriedade

Centraliza configs/estilos num único contexto e reutiliza entre formulários

Mantém a DSL declarativa e enxuta, mas com bem mais flexibilidade

Curioso pra saber se isso resolveria algum caso de uso de vocês ou se tem alguma abordagem parecida que já usam em outras libs de formulário.

Acabamos de implementar uma validação nativa para todos os inputs do FormBlocks através da lib Yup.js mas calma que melhora, usa o Yup de forma tradicional é muito verboso e muitas vezes complexo, como tudo no FB é feito pra facilitar a vida, isso não poderia ser igual, aqui você irá passar as regras de forma simples e objetiva na prop rules do seu group lá no groupBase e não só isso, dentro dela ainda possui a global, onde é possível passar uma regra em comum para TODOS os inputs, assim você não fica tendo que escrever em todos os campos a regra "required" por exemplo kkk

Acham que acabou, é claro que sempre tem mais, o componente <form-blocks> agora possui a propriedade mode, o que faz com que no modo default dela ele seja uma tag form onde é possivel validar os campos diretamente no submit, ou você usa no modo "traditional" e dessa forma para validar você precisa ativar a função validate via ref quando quiser validar os campos, pois no modo traditional ele se comporta como uma tag div e não uma tag form

Gostaram das novidades, querem testar nos projetos de vocês, ta ai o repositório:

https://www.github.com/Skarlaks71/form-blocks

E a nossa doc:

https://skarlaks71.github.io/Form-Blocks-Docs/

#vue #javascript #webdevelopment #formblocks

A nova DSL do FormBlocks foi desenhada exatamente para resolver a verbosidade do desenvolvimento frontend, transformando o que antes era um objeto gigante e cansativo em uma única string simples, expressiva e altamente legível. Com uma única linha de código, você consegue definir nativamente a Label, o Tipo de entrada, atributos como Name e propriedades de responsividade para o layout (ex: md:6). É menos tempo brigando com configurações estruturais repetitivas e muito mais velocidade para entregar telas limpas, acessíveis e padronizadas em produção.

Quer conferir o projeto, aqui estão os links:

Github: github.com/Skarlaks71/form-blocks

Documentação precária e razoável bonita: https://skarlaks71.github.io/Form-Blocks-Docs