I’ve followed the available instructions and even had GitHub Copilot try to resolve the issue, but I’m still unable to get Piny to load correctly. I’ve paid for a license, but I’m stuck and unsure of the next steps since nothing is working as expected.
I’d really appreciate clearer setup documentation — especially for users like me who build apps using AI tools such as Lovable.dev. I used Lovable to scaffold my app, and I turned to Piny to manually tweak styles and structure. But I’ve hit a wall even getting it to load.
A few specific challenges:
- I’m not sure where the generated .js file from Piny is supposed to go.
- When I try to create and place it myself, I often guess wrong.
- Copilot doesn’t help much either — it can’t figure out the config or the pathing issues.
- The sample code in the docs has … placeholders that cause Vite to crash when copied directly.
- There’s no clear explanation of how to load dependencies or where to mount the Piny-generated files.
Overall, I think Piny is a great idea and could be extremely helpful — especially for AI-assisted developers who are just beginning to work with React and Vite. But the current documentation feels like it assumes a level of familiarity with the internals that many of us don’t have yet.
Some inline comments, setup diagrams, or step-by-step usage examples would go a long way to making this more accessible to first-time users.
Thanks for your time — and looking forward to getting it running soon.
I figured out the issue I was having: I used Lovable to scaffold my app, and it generated a vite.config.ts file by default. But Piny’s documentation says to create a vite.config.js file — and never mentions the two might conflict.
Piny wasn’t working at all until I realized that Vite prioritizes vite.config.ts over vite.config.js. Once I renamed vite.config.ts to vite.config.ts_bak, everything started working.
I’m not a TypeScript user, so I’ll be sticking with piney going forward. But I think this should really be mentioned in the Piny setup instructions — especially since tools like Lovable and others commonly generate TypeScript-based projects.
@smgitner thanks for getting Piny!
Yes, I’ll make the instruction more clear on this point.
If your project uses vite.config.ts, then you just add Piny references into that file, no need to create a separate vite.config.js file.
TypeScript is ok and Piny works with it as well. So, if you have a TypeScript Lovable project there is no need to change to plain JS.
I have a personal toy project done with Lovable and Piny is a great companion. I use Lovable to do big changes (add pages, components, refactor code, database stuff…) and Piny to directly tweak the styling.
With GitHub it is easy to keep the Lovable and local versions in sync.
I’m still running into issues. I can get the server to load just fine, but I’m having trouble getting my Lovable app to show up when I click “Edit in Piny.” Maybe I’ll figure it out eventually, but no luck so far.
I’m wondering—could you create a tutorial specifically for using Lovable apps with Piney? Or maybe provide a prompt I can use in Lovable that tells it I plan to eventually edit the project with Piny in VSCode? That way, the generated app might be better structured for Piny compatibility.
1 Like
@smgitner here is a video guide on how to edit Lovable projects with Piny. Let me know how it goes, if there are still some problems. And thanks for the idea!
Your reasoning for using piney with lovable is spot on … I will test your tutorial later today but yes thank you .
1 Like
