website: Add new Blog Post #5

[ysknsid25]

Talked on X (post). This is new blog post about practical example of using Valibot and Formish.

Summary by CodeRabbit

• Documentation
  • Added a blog post introducing a web app that generates fully validated .coderabbit.yaml configuration forms.
  • Explains how JSON Schema derives form defaults, validation, and appropriate input controls.
  • Details schema-driven rendering for nested and grouped configuration fields.
  • Includes links to related resources and the project repository.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

Walkthrough

Adds a blog post that documents a configuration generator built from CodeRabbit JSON Schema. The post covers Valibot schema conversion, Formisch form state, widget metadata generation, and recursive FieldRenderer rendering for nested fields. It also includes examples and links to related resources.

Possibly related PRs

• open-circle/formisch#150: Announces the Formisch v1 RC release, while this post demonstrates Formisch’s useForm and FieldRenderer.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the main change: adding a new blog post to the website.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Copilot]

Pull request overview

Adds a new blog post to the Formisch website describing a practical Valibot + Formisch example: a web app that turns CodeRabbit’s JSON Schema into a validated GUI for generating .coderabbit.yaml.

Changes:

• Introduces a new MDX blog post covering the problem space (.coderabbit.yaml complexity) and the generator app.
• Explains the approach of converting JSON Schema → Valibot schema → Formisch form state and recursive rendering.

Comments suppressed due to low confidence (1)

website/src/routes/blog/(posts)/coderabbit-config-generator/index.mdx:161

• Using raw HTML underline (<u>...</u>) for emphasis can be confusing for users (underline is typically reserved for links) and may not match the site’s styling. Prefer Markdown emphasis instead.

In other words, <u>simply by defining the specification of the input fields in JSON, you can convert them into GUI input fields using Valibot and Formisch, and simply by editing the JSON, that specification is reflected in Valibot and Formisch as well.</u> This is an extremely powerful, consistent, and attractive property.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@website/src/routes/blog/`(posts)/coderabbit-config-generator/index.mdx:
- Line 157: Update the schema-generation explanation around the `properties`
entries to document that parent-level `required` fields must be preserved: wrap
properties not listed in the parent `required` array as optional before
constructing the object schema, while leaving listed properties required. Ensure
the generated schema accepts valid partial `.coderabbit.yaml` files.
- Around line 62-64: Update the JSON Schema-to-Formisch explanation around
LoginSchema to document how JSON Schema default values become initial form
input. Either describe converting defaults into Valibot and Formisch’s
schema-based initialization, or show the generated initialInput passed alongside
schema, while preserving the existing runtime conversion example.
- Around line 169-176: Update the conversion table to split the combined
`number` / `integer` row: document `v.number()` for `number`, and document
`v.pipe(v.number(), v.integer())` for `integer`, while preserving the existing
minimum/maximum guidance for numeric schemas.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 73e17555-9b31-451e-8d0d-04047dedf412

📥 Commits

Reviewing files that changed from the base of the PR and between 530a014 and 56999fd.

📒 Files selected for processing (1)

• website/src/routes/blog/(posts)/coderabbit-config-generator/index.mdx

[cubic-dev-ai]

All reported issues were addressed across 1 file

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[flySewa]

Hi! @ysknsid25 this is really cool, I'm glad you wrote it up.

One thought on structure. The Valibot and Formisch intros run 45-131, which is a lot of lines before the JSON Schema part starts, and a lot of it is ground the README and intro guides already cover. Most readers here have that already, so I think getting them to your material faster would help. Whatever you want to keep is up to you, but a few sentences on each plus links to the intro guides would do it.

Line 68 describes Formisch as a React library that also supports Vue and Svelte. Preact, Qwik and Solid are in there too and they're all on equal footing. I recommend that the wording reflect that.

On the title, the front half describes the genre more than what you did. The parts that grabbed me were the 400 fields that didn't need typing out, and I think it can be a shorter title, with Valibot and Formisch in the description. Something like "Generating a 400-field .coderabbit.yaml form from a JSON Schema"?

[ysknsid25]

@flySewa
Thank you for your comments!
I have incorporated your feedback. Please take another look!

[flySewa]

@flySewa Thank you for your comments! I have incorporated your feedback. Please take another look!

Looks good.

The Formisch intro says it's built on Valibot and other Standard Schema libraries. Only Valibot works right now, the rest is planned. Could we say something like "built on Valibot, with plans to support other Standard Schema libraries like Zod and ArkType"?

[ysknsid25]

@flySewa
I rewrited like this.

Formisch is a schema-first, headless form library built on Valibot, with plans to support other Standard Schema libraries like Zod and ArkType. Instead of managing field values with useState and writing a separate validate function by hand, you pass a schema straight to useForm, and the form's input values, initial values, and validation errors are all derived from it automatically. Formisch supports seven frameworks on equal footing — Angular, Preact, Qwik, React, Solid, Svelte, and Vue.

How do you feel?

[flySewa]

Thanks for reworking it.

@fabian-hiller this is ready for your review whenever you have time.