Is svelte support planned? update: its supported!
The only frontend library I now well is svelte but I really wanna try your Baas.
Will the be support for it? And if so is there a planned release date?
56 Replies
hi! @DerPenz we don't have an official client library yet, @ballingt has been working in this area on a more general javascript client that makes it easier to attach convex to non-react frameworks, and I do have an unofficial project for a long time ago: https://github.com/jamwt/svelte-convex
GitHub
GitHub - jamwt/svelte-convex: Quick, rough example using Convex wit...
Quick, rough example using Convex with Svelte. Contribute to jamwt/svelte-convex development by creating an account on GitHub.
I think Tom might also have an updated version of it, but I'm not 100% sure
I've got something similar, I'll get an example out this week! I showed @Jacob Wright who knows Svelte well my example he had some helpful feedback I'm incorporating.
Thanks for the help.
I will be looking into it
That would be amazing
Do you maybe have a Sveltekit example?
Yep that's what I've been doing to make sure we server-side rendering so omnipresent in Sveltekit works
Any update on this?
Wow it's a week later already? @DerPenz this isn't out yet, I'm still working on getting a callback-based JavaScript client out.
@DerPenz In the meantime, here's a draft SvelteKit example: https://github.com/thomasballinger/draft-demo-convex-sveltekit
GitHub
GitHub - thomasballinger/draft-demo-convex-sveltekit
Contribute to thomasballinger/draft-demo-convex-sveltekit development by creating an account on GitHub.
This is a bit messy and I've since learned about some even better patterns we can use — but if having a Sveltekit example is blocking you from getting started this should work!
It was real fun to play with this, SvelteKit feels pretty good — I love getting to use good old CSS but in the same file as my component. @DerPenz let me know if you have any questions with this
Thanks I will look into the draft later. I wanna participate in the web dev cody hackathon and I am most confident with sveltekit. As long as the basic realtime works its enough.
The reactivity isn't bad, half of the code is getting server-side rendering working
Definitely keen to see this when it's ready (or even before)! I pieced together a framework-agnostic, callback-based reactive client a few months ago as I was initially exploring Convex but haven't had time since then to do much with it. Is the idea to include your client in Convex releases going forward, or is it just an example of how you'd build one on top of the base web client?
The callback-based client will be in Convex releases. It's something we've been meaning to do for a long time, it doesn't provide anything you couldn't implement based on the BaseConvexClient but it should cut down on the boilerplate we've noticed in when people write Svelte, Vue, Solid etc. clients.
@Gray the
ConvexClient is out now with Convex 1.3 https://news.convex.dev/announcing-convex-1-3/
It's not a full Svelte client, but it makes it easier to build one without pulling in ConvexReactClientConvex News
Announcing Convex 1.3
Convex 1.3 brings a new callback-based JavaScript client for using Convex in non-React apps and a way to propagate error information for better error handling UX. We’ve also made a bunch of improvements to our CLI and runtime!
Callback-based JavaScript client
The reactive paradigm is a great fit
Thanks, will check it out!
I also just updated https://github.com/thomasballinger/draft-demo-convex-sveltekit, it's a bit simpler now that it uses
ConvexClient instead of the React client
Excited about the new Svelte changes announced today, as a non-Svelte native speaker the new syntax is clearer to me!Ooh, I'll have to take a look.
I cam here to ask if anyone has auth working with convex + svelte?
The convex + svelte example above worked fine for me, but then I realised I didn't know an auth solution for that combo. So I had to go back to react for web dev cody's hackathon.
@yarrichar any luck with auth
Convex needs a template inn Vercel for both React and Svelte https://github.com/vercel/examples
GitHub
GitHub - vercel/examples: Enjoy our curated collection of examples ...
Enjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications. - GitHub - vercel/examples: Enjoy our curated collection of examples a...
@ballingt Adding a template
If you would like the example to be featured in vercel.com/templates then also add the front matter metadata to the top of the readme, like in bot-protection-datadome. To know all the possible values for each metadata take a look at internal/fields.json.
If you want to add related templates to your template, copy the slug from the other template into the relatedTemplates field, for example for vercel.com/templates/next.js/monorepo-turborepo the slug is monorepo-turborepo, as written in solutions/monorepo/README.md
No I didn't in the end - so I ended up back with nextjs. In hindsight I don't think it would have been too hard to do a custom auth provider: https://docs.convex.dev/auth/custom-auth Here is an example of a custom provider for next auth: https://discord.com/channels/1019350475847499849/1019350478817079338/1133076376501637140
Custom Auth Integration | Convex Developer Hub
Convex can be integrated with any identity provider supporting the
@yarrichar did you try Lucia
It’s crazy simple
Custom Auth is super easy in theory but the docs are super confusing
Wait can I access user context with this?
@Merge Tree Maxxer this client has a
setAuth handler which you can use to integrate the framework's auth capabilitiesSexyyyy. Are there docs for that I'm missing somewhere?
here's the client: https://docs.convex.dev/api/classes/browser.ConvexClient
Class: ConvexClient | Convex Developer Hub
browser.ConvexClient
Class: ConvexClient | Convex Developer Hub
browser.ConvexClient
Ah cool coollll
Having seen so many amazing walkthrough videos on stack for nextjs apps, I think that a sveltekit/convex saas video is in line... A good boilerplate / template would help many of us svelte devs get on board with convex. Svelte with convex would be a combo made in heaven...
@ballingt on our team has been investing in this quite a bit lately, and we recently added Svelte to our list of supported frameworks! see
the page with links is here: https://docs.convex.dev/client/svelte
Svelte | Convex Developer Hub
Convex is a great fit for reactive UI frameworks like Svelte. The
client library, and example app
@ndamofli do you have a favorite style of video for something like this? What would you want out of a video here? I agree videos can be nicer than text tutorials because there's no elision, ever single step is visible — but wondering what else you'd want beyond "create a sveltekit app, add convex, hook it up"
Hi Tom.! First of all congrats on your amazing videos… As far as the tutorial video is concerned, a basic saas boilerplate app would be sufficient. Even a note / todo list would be ok I guess.. Sveltekit, ssr auth ( clerk or native convex) user / data stores, dynamic routes, file uploads, maybe a cloud function call as an example… Stripe / Lemon squeezy integrations would be godsent.. This feels a lot like a letter to santa..
Maybe a rebuilt for svelte series for existing videos such as https://youtu.be/ADJKbuayubE?si=8FxQxUcfMjA9hyKS
Code With Antonio
YouTube
Build a Real-Time Miro Clone With Nextjs, React, Tailwind (2024)
⭐️ Source Code & More: https://www.codewithantonio.com/projects/miro-clone
💬 Discord & Help: https://www.codewithantonio.com/discord
Clerk: https://dub.sh/mz7fwfW
Convex: https://convex.dev/c/cwa
Liveblocks: https://liveblocks.io/
Logoipsum: https://logoipsum.com/
Sally 3D illustrations: https://www.figma.com/community/file/890095002328610853/s...
Thanks @ndamofli, helpful to hear! A video of this level could take a while but message received that this level of detail would be helpful.
@ballingt just started testing convex with svelte and turns out, some 3rd party libraries I use with svelte 4 not working with svelte 5. Will convex ever support svelte 4 or it's totally not possible due inner architecture?
Hi @GhostBob, I was in your shoes when I decided to join the hackathon (vol 2). All I did with Svelte before was relying on Svelte 4 but convex-svelte is built on Svelte 5, so it forced me to learn Svelte 5, and replace everything which does not support it. It has only been a two weeks journey in total but it was worth the effort. Svelte 5 is so much easier than Svelte 4, so I would recommend switching to it even if you feel it hurts.
The project is private on github yet, but I will open it to public after 17th of September. Till then check out the result if you are interested: https://discord.com/channels/1019350475847499849/1283704544932397056/1283704544932397056
@iScream it would be hard to substitute shadcn-svelte library components with another one
I also use it, and all it does just warn about
context="module" is being deprecated and use the module attribute instead. Do you have any other issue?small issue here and where, also can't install svelte-chartjs.
There is a bug opened in svelte-chartjs about Svelte 5 (https://github.com/SauravKanchan/svelte-chartjs/issues/158). The author does not show any activity in the repo, but there are some contributors whom might be worth pinging.
GitHub
Issues · SauravKanchan/svelte-chartjs
svelte wrapper for chart.js. Contribute to SauravKanchan/svelte-chartjs development by creating an account on GitHub.
@iScream do you use convex auth with your svelte app? Can't find any documentation about convex svelte auth...
I use Auth.js. There are tutorials in Convex doc about it, but I had to implement my own component instead of the React one. The tutorials describe auth.js setup, custom adapter and Convex function implementations.
so technically - lucia auth - could be implemented too?
I guess so.
thank you
Yep, super easy too
@v found some issues that lucia v3 is not working with convex: https://github.com/get-convex/convex-lucia-auth/issues
GitHub
Issues · get-convex/convex-lucia-auth
Convex database adapter for Lucia Auth. Contribute to get-convex/convex-lucia-auth development by creating an account on GitHub.
GitHub
GitHub - vynxc/lucia-svelte-convex-demo
Contribute to vynxc/lucia-svelte-convex-demo development by creating an account on GitHub.
Simple implementation here
interesting - thank you
If you need help you can ping me, but I may be off to be soon
I just pushed a fix to a broken commit. I believe it should all be working but I haven't tested it much
Super easy to add oauth too
great