Several things! But my favourite use-case works surprisingly well.

I have a js-to-video service (open source sdk, WIP) [1] with the classic "editor to the left - preview on the right" scenario.

To help write the template code I have a simple prompt input + api that takes the llms-full.txt [2] + code + instructions and gives me back updated code.

It's more "write this stuff for me" than vibe-coding, as it isn't conversational for now.

I've not been bullish on ai coding so far, but this "hybrid" solution is perfect for this particular use-case IMHO.

[1] https://js2video.com/play [2] https://js2video.com/llms-full.txt

What are you building? Ping me if you want a tester of half-finished breaking stuff

It’s MIDI

Thanks, I have some of the same issues with FF on www.render.video - will look into this ASAP :)

You can take a screenshot and long click the QR to go to the link. At least on iOS. No need for another phone ;)

Not exactly obvious to say the least, but it works.

images.zip was available a couple of hours ago, now it's taken.

We created a small webapp that works pretty good for us:

https://calestimate.com

(No login needed to try it out)

This is the easiest way I know to get a React app up and running. https://ymse.io/blog/how-to-create-a-minimal-react-app/

From that list you only need React and a bundler, which can be Vite. You really don't need more than that to get started. Please ask, I'll do my best to help you out.

What do you need for keeping CSS scoped to React components?

Solution 1: You can give a classname to your component and prefix every CSS rule with this classname. e.g. <CustomSelect>, which translates to <div className="custom-select">, which you can style by prefixing every rule with .custom-select. You put that in the index.css inside your folder CustomSelect to be easily editable when you need it.

Solution 2: Otherwise you could try to use CSS modules (Vite supports them out-of-the-box I think).

Solution 3: Otherwise you could try one of the many "CSS-in-JS" libraries like styled-components.

Personally I'm using the solution 1, did for more than a decade, works fine, scales well, nothing to install and learn, just old straightforward CSS.

In practice, I find keeping your CSS separate from the JSX tends to be cleanest (your solution 1).

Separation of concerns with what are essentially totally different markup languages is best when you can. We tolerate it with JSX because there isn't a fantastic first-class declarative way to express an object, a list of objects, or filtering in HTML. (I have seen WebComponents and the MDN tutorial seemed like taking a step back.)

Personally I suck at CSS and avoid writing it like the plague, even after 20+ years of doing it.

I use TailwindCSS [1] for all my styling needs and couldn't be happier.

If you really want scoped CSS in React this approach [2] can also work, and it makes it easy to use tailwind if you want.

[1] https://tailwindcss.com

[2] https://miyauchi.dev/posts/lib-vite-tailwindcss/#css-modules

styled-components

Exciting product. You should describe some common problems people have, and show us how you could use Scriptable to solve them. That's a nice and "easy" way to showcase a service IMHO.

Cheers mate! And thanks a lot for suggestion, this is how we’ll so it!

No worries mate. The examples don't have to be ground-breaking or even relevant (for me), but clear so I can see how I can apply Scriptable.dev to solve my specific problems.

And, since you target developers, add as much info as you have. Don't skip messy stuff like "how to authenticate" or similar.

Good luck!