:rocket: Introducing Artboard: a spatial browser g...

# feed

[katokay]

🚀 Introducing Artboard: a spatial browser gallery for Compose Multiplatform @Previews.

Artboard discovers your previews with KSP and renders them on a pan-and-zoom Kotlin/Wasm board, with search, device, grid overlay, locale, and light/dark controls. Frames have stable deep links, and the Gradle plugin generates an isolated gallery without changing your app’s target setup. This brings the benefit of both rapid visual validation for an entire projects preview screens as well as a feedback loop that AI can easily see an interpret as well.

The repo is available now: https://github.com/crowded-libs/artboard

I’ll be publishing the Maven package for the Gradle plugin in the next day or two.

[katokay]

artboard_sample.png

[Alex Styl]

Needs a link with live demo

[katokay]

Yep, good idea. Possibly a new command to facilitate static site export with artboardExport as well. I'll try and push something up with gh-pages a bit later.

[Casey Brooks]

This looks amazing, I've been looking for something just like this! I will definitely be checking this out sometime today.

Is there a way to download an image of one of the previews from the board? For grabbing screenshots for an App Store listing, for example.

[katokay]

They aren't images, they are live WASM screens from the previews. There might be options though. Open an issue and will see if I can find anything out on it.

[katokay]

Live artboard demo: crowded-libs.github.io/artboard

[katokay]

@Casey Brooks just pushed the png export capability. It's also in the live demo if you want to see how it works.

[Stefan Oltmann]

Very nice!

Would pinch to zoom in the browser be possible?

[katokay]

Maven package was just published. v0.1.0 so it should be easier to try out now.

[katokay]

@Stefan Oltmann already works unless you see something I don't?

[Stefan Oltmann]

It does not work in Safari on my iPad.

[Stefan Oltmann]

Brave browser doesn't work, too. I think everything is WebKit.

[katokay]

Ah, I think I was overconfident on the Mac trackpad mapping equally to the behavior. I'll focus on iPad. Thanks for following up.

[katokay]

@Stefan Oltmann I just pushed up the pinch zoom / pan changes. The live demo also has the change to try out if you want. The exported version feels a little slower on the pan than local server did for the demo gh-pages, but still works well. v0.1.1 also has the changes.

[katokay]

Thanks for the feedback.

[Thomas Hormes]

This is pretty awesome. How do you differentiate between Screen and Component? Just by looking for the String Screen in the Preview fun name?
Also, how well would this work with a project, where the screens and components are scattered between multiple gradle projects?

[Thomas Hormes]

Nvm. for the first question: It says so in the minimal sample :

Naming convention for kinds:

- *ScreenPreview → Screens zone

- other *Preview → Components zone

[katokay]

@Thomas Hormes Yeah, I'm sure that convention will change over time based on feedback, but the conventions hold true for my existing apps today.

[Thomas Hormes]

@katokay the biggest thing holding me back from me adopting it for all our apps is the multi module question. Are there any plans? Or is it just not possible to combine the previews of multiple modules?
We have split our apps into multiple modules each containing screens and components

[Thomas Hormes]

Concerning the naming convention: I think if you make the plugin take a parameter as regex for the naming that would be ideal and provide maximum flexibility

[katokay]

If you don't mind opening an issue describing in a bit more detail what you're looking for. I don't mind adding the capability. I just finished integrating it into my own workflows. I can definitely say it's amplified my productivity and it's generally just nice to have something you can see everything at a glance.

[katokay]

Regarding the regex, I assumed the dsl for the plugin would need to evolve in that way to some extent. Not sure if Regex is the right route or not, but open to it.