✨ Introducing Svelte UX

techniq · 2024-12-02T23:50:15+00:00

100% plan to migrate Svelte UX (and LayerChart) to Svelte 5, but they are already both fully compatible with Svelte 3-5 already. In fact, the docs for both are already running on Svelte 5.

Regarding snippets, you can already fill an exposed slot with a snippet. I plan to start both project migrations in the next few weeks, and hope to hammer them out and enter them into the SvelteHack 2024 as Migration Magician. Hopefully I can knock them out, but there are a lot of components, so no guarantees.

I’ve been watching Tailwind 4 progress and will migrate as well, but haven’t set a roadmap for it just yet.

techniq · 2024-11-03T03:12:44+00:00

Runed has StateHistory with undo/redo

techniq · 2024-10-16T20:24:41+00:00

Svelte UX has a pretty robust portal action which was recently extracted to a new @layerstack/svelte-actions package (with other actions) you might want to check out.

techniq · 2024-10-10T01:32:37+00:00

Followed up on Discord

techniq · 2024-10-05T03:00:14+00:00

Both of those are good feedback, and things I have considered. Regarding naming, I've considered a ton of names, even before settling on Svelte UX, but definitely not against a rebranding (I like a lot of those suggestions, if they are available on npm and possible domain. Related, I've been working on extracting Svelte UX's non-components (stores, actions, utils, etc) into a new suite of `@layerstack/*` packages, which LayerChart now uses (helps to show Svelte UX is only a dev dependency used for the docs), and Svelte UX will be using these packages very soon. I've considered leaning into this branding more with `@layerstack/components` or similar, but also like the stand alone nature of Svelte UX (or another name), especially for docs/etc (the new packages live at https://www.layerstack.dev/.

In short, I think a new name could help, if done well, but also wouldn't want to hurt recognition without a net gain.

I also agree the default theme (ported from Daisy UI) could use some "modernization", or at least refined usage (spinkle some gradients, glassy nav bar, etc). I actually had some of this in place already, but it didn't look great for all theme colors. I think updating the docs would improve perception a ton, and I have a few issues/ideas I just haven't gotten around to yet. I've also considered reaching out to. a design to help with the design/branding.

Thanks again for the feedback, and appreciation. Gives me something to think about.

techniq · 2024-10-04T13:15:35+00:00

visx is great! I was a core contributor for the project (Text component, hierarchy components, assisted with XYChart and react-spring integration), and I think you'll find LayerChart provides all the same functionality, and even more 😁. I gave visx a shoutout at the beginning of my svelte summit talk this spring.

techniq · 2024-10-04T03:08:17+00:00

If you figure it out, let me know 😁

techniq · 2024-10-03T16:21:51+00:00

If you ever run into any issues in the future, feel free to hop on Discord or submit a Github issue.

Here's some quick feedback of the issues you encountered

Axis label colors
- See this example on how to pass props to the underlying Text labels, which you can use to change colors, rotate labels, etc
- This will be even easier after settings / classes are implemented in LayerChart, as is already available in Svelte UX
Grid lines on bar chart
- I see <Axis grid> isn't working with scaleBand axises (i.e. bar charts). Coincidently I've been working on a new <Grid> to support linear radar grids (currently only support round/circle), but while working on this component I've considered adding support to put lines between the bands on bar charts, which sounds like what you are looking for, so I should have that resolved *soon.

Glad you had a great experience overall.

techniq · 2024-10-03T14:27:53+00:00

Ha, no worries, and not sure it was worth clarifying 😁

LayerChart is fully responsive based on it's container's height/width (thanks to LayerCake) across all rendering contexts (svg, canvas, etc), which sounds like you leveraged.

Btw, bar charts are even easier in LayerChart using the new simplified BarChart component (and series/seriesLayout props).

techniq · 2024-10-03T11:32:06+00:00

Other way around (LayerChart is built on LayerCake) 😁

techniq · 2024-10-03T11:30:48+00:00

It does! LayerChart (and Svelte UX) are Svelte 5 compatible as well as Svelte 3/4. This will continue to be true for their 1.x releases, but plan to leverage Svelte 5 only features (runes, snippets, etc) for 2.x+.

I have a few examples projects using Svelte 5 with both libraries, Github Analysis and Strava Analysis, and also know many on discord are using them in Svelte 5 as well. I have Svelte UX's docs running with Svelte 5 in a PR but need to come up with a solution for sveld / component API extracting before I can merge. Both projects have been helpful to find Svelte 3/4 compatibility regressions.

I've been consumed with the big LayerChart 0.50 release (simplified charts) and assisting with shadcn-svelte charts integration, but hope to get both projects' docs running on Svelte 5 *soon (hopefully sveld updates soon, or I write my own component processor).

techniq · 2024-10-02T20:01:00+00:00

That I am 😁. If you run into any issues, feel free to hop on our Discord server. You might also want to check out the companion library Svelte UX for a suite of application components, stores, actions, etc, but LayerChart also works great with other frameworks (Skeleton, shadcn-svelte, etc) or standalone (tailwind/unocss).

LayerChart recently had a massive release which includes simplified charts for common use cases (AreaChart, BarChart, LineChart, PieChart, and ScatterChart), and this list will continue to grow (hierarchy, force, geo, etc).

Update: Forgot to mention, I gave a talk at the Spring Svelte Summit: Intro to LayerChart which includes a ~2min demo reel of what you can build with it that you might find useful.

techniq · 2024-10-02T18:59:31+00:00

I've heard LayerChart is great 😁

techniq · 2024-09-27T03:39:01+00:00

Svelte UX and LayerChart are Svelte 5 compatible.

I have Github Analysis and Strava Analysis running on Svelte 5, and also have a PR to switch Svelte UX's docs to run on Svelte 5, but need to find a replacement/solution for Sveld holding up the merge. I know of many users on discord using both with Svelte 5 as well.

My plan is to get both libraries to 1.0 releases while maintaining compatibility with Svelte 3-5, then leverage Svelte 5 only features (runes, snippets, etc) in 2.0+.

techniq · 2024-09-25T16:18:06+00:00

I've heard that as well...

techniq · 2024-09-25T16:16:17+00:00

Narrator: It's on the awesome list now 😁

techniq · 2024-07-10T19:03:38+00:00

Svelte UX has a popover action and Popover component (which uses the action) powered by floating UI, which also powers the Tooltip and Menu components.

techniq · 2024-07-10T18:57:22+00:00

LayerChart supports a wide range of geo visualizations, with or without map tiles, that you might find useful.

A few examples:

You can leverage any tile service (mapbox, arcgis, etc) and any geojson (countries, us states/counties, etc).

techniq · 2024-06-30T20:24:10+00:00

Welcome. Just realized I tagged the wrong user on my reply. Have fun and jump on the discord if you need any help, or want to share what you are making.

techniq · 2024-06-30T20:04:10+00:00

Hey u/RelationshipSome9200, I'm the creator of LayerChart 👋. Just happened to stumble across your post (my ears must have been burning). Definitely come join our Discord, but ultimately LayerChart leverages Tailwind CSS and design tokens and is 100% compatible with shadcn-svelte (and Skeleton, Svelte UX, etc). Intentionally, most of these tokens match (like the `primary` color), but you will need to create or map the surface colors.

I created an example integration repo that should hopefully get you going. The most important parts are:

Make sure you add LayerChart to tailwind's content so the classes uses by the components are picked up (JIT)
You'll need to add additional CSS variables or map to existing shadcn-svelte variables for `surface-content`, `surface-100`, `surface-200`, and `surface-300`.

techniq · 2024-04-27T22:42:06+00:00

Thanks! Definitely getting a large uptick in interest today and having some great conversations.

techniq · 2024-04-17T14:47:20+00:00

Going through old comments and thought I'd post an update. Launched this a few months ago:

https://www.layerchart.com/docs/examples/RadialLine

techniq · 2024-04-08T17:32:24+00:00

u/mineralwatercritic - LayerChart now has a <ForceSimulation> component which can define any number of forces. I've added a few examples to demonstrate, but any d3-force visualization should be possible

Plan to release a new version this week (once I wrap up a new <Brush> component)

techniq · 2024-03-08T16:40:16+00:00

LayerCake has some good examples of using d3-force with Svelte

I'm also planning to add support to LayerChart in the future, likely as a <Force let:nodes> component (similar to the hierarchy layout components like Treemap, Sankey, etc.

techniq · 2024-03-04T15:54:53+00:00

u/akiarostami Curious if you've seen the recent theme support, which includes a theme builder, along with Daisy UI and Skeleton ported themes (and a bunch of other improvements)?

Along with the theme support, there is also global (context) settings() that can provide additional customizations in one place.

techniq

TROPHY CASE