🔨 Convex Component Template – Production-Ready Boilerplate
Just released a production-ready template for building Convex components.
If you want to build reusable Convex components (like rate limiters, sharded counters, document search, etc.) and publish them to npm, this template has everything you need:
- Automated rename script – transforms the entire codebase to your component name
- Live reloading with --live-component-sources
- Testing setup with convex-test (auto-discovery included)
- Changesets for versioning + automated npm publishing
- pkg.pr.new for preview packages on every commit
- Example app showing how to use your component
- Pre-configured CI/CD with GitHub Actions
Just clone it, run bun rename.ts, and start building.
Repo: https://github.com/samhoque/convex-component-template
21 Replies
If you prefer to use Zodvex instead, there is now a branch that defaults to using zodvex for functions & schema.
https://github.com/SamHoque/convex-component-template/tree/zodvex
GitHub
GitHub - SamHoque/convex-component-template at zodvex
A modern Convex component boilerplate with Bun, Biome, TypeScript, and automated testing. - GitHub - SamHoque/convex-component-template at zodvex
@Sam what if i want to use the component pattern, but just on my current project, any guideline for this?
Hey Ibrahim, what do you mean? I set the structure to how I like, however feel free to change it to your likings.
I just want to build a component without actually creating the npm package
How do i do that?
You could move everything into a directory called
components and see how the example directory works in my template. and rather than getting the component sources from src get it from your components directory.i just looked into your codebase and i see the
defineComponent api that i didnt know even exist
there should be a dedicated section in convex doc for building custom compoennt
cc @erquhartconvex-dev on Notion
Authoring Components | Notion
Components are here! https://www.convex.dev/components
there is also their official template and example https://github.com/get-convex/sharded-counter/tree/927521a83b4297858bb83926fdc1f14f719f179e
GitHub
GitHub - get-convex/sharded-counter at 927521a83b4297858bb83926fdc1...
Contribute to get-convex/sharded-counter development by creating an account on GitHub.
oh man i've been missing out these
If you break it down, components are very easy to make, all you need to make sure is you got a
convex.config.ts with the defineComponent and your component directory exports the query/mutation/action as well as the _generated directory.
:xzibit:yeah looking at the doc it should be
funny that last week i asked #ask-ai
Feel free to ask any questions, or if you need help, I am always available.
Not a public api yet (cc @Sam 😅) - things can still change or break.
will do thanks
any eta of when i can expect this, im looking forward to refactor a whole lots of things in my messy codebase haha
Soon, working on bringing component authoring api's out of beta
Understandable, however it seems stable for now.
Yep! that's what I am doing now, I am making everything into a component and providing api/react hooks to my SaaS.
:xzibit: via npm package
This is really helpfull thank you, will convert some libraries to component
yeah i think this componentazation of convex code should be a priority, convex bloated codebase sucks
To follow up on what @erquhart said above, James mentioned in the AMA today that the official component authoring API should be released soon, possibly as soon as next week.