Show HN: Remake – Build web apps with HTML
remaketheweb.com
remaketheweb.com
I made Remake 2 years ago while working on a separate project. [0]
I started that project off with 6 months of research (interviewing potential customers) and 6 months of designing the pages.
I wasn't looking forward to spending another 6-12 months building it all out. I needed a quicker path.
Then the idea came to me: HTML & JSON have very similar structures. They're both ways of storing deeply nested page state. What if I could connect them together and make a really simple way of building web apps?
All I needed to do was convert deeply nested HTML into deeply nested JSON (by tagging elements as being arrays, objects, or keys in those objects) and save the result the current user's account!
Then I could use whatever client-side plugins I wanted (date pickers, file uploaders, inline edit popovers) to edit the page — and sync the resulting JSON data to the backend automatically. It was a really exciting insight for me and would make building a full-stack app as simple as prototyping.
I could even use the data across pages because the JSON structure could, of course, be reused on every page.
That's how I accidentally created a web app framework that lets you make web apps with only HTML templates. I'm really excited about bootstrapping it to profitability over the next year.
[0] RequestCreative.com
If your kids know enough to build their first website (HTML + CSS), they can also build their first web app with Remake.
I'd recommend checking out the Remake Recipes page [1] to get an idea of just how easy it is to build something that works. All of the editable examples on that page – as long as they use Handlebars.js {{variables}} – are examples of fully-working Remake apps that can be pasted into a Remake project (the app-index.hbs file). After that, they'll be working apps with editable data and user accounts that can be instantly deployed.
However, if you want to start by understanding the vision of Remake and get a broad overview of how it works, I can recommend this video I recently made: "Why Build With Remake" [2]
Also, here are a few of the more difficult parts you might run into:
- Terminal. You will need to run a few commands (remake create & npm run dev) to get the local Remake server running. It sounds like your kids are familiar with the command line, so this probably won't be a problem.
- JSON. In addition to Handlebars.js templating and CSS, your kids will also need to learn a little JSON. It's a pretty simple version of JSON (just objects, arrays, and strings all the way down), but it's still an extra concept to learn.
- Routing. If your web app has multiple pages, each with it's own editable data (i.e. it's not just a one-page website builder) you'll need to turn on Remake's unique IDs. There's good documentation around this [3], but unique IDs is a slightly harder concept to grasp than just HTML ⇄ JSON.
Good luck and let me know if I can help in any way. If a concept is confusing and you send me an email [4], I'll be happy to make a custom tutorial on the subject.
[0] https://github.com/kamranahmedse/developer-roadmap
[1] https://recipes.remaketheweb.com/
[2] https://docs.remaketheweb.com/why-build-with-remake/
Hackers like us pick up a new language easily. Though I have seen people struggle to learn the necessary languages for building dynamic web (HTML, CSS, JavaScript). I guess that's the reason Tailwinds got popular, because people don't need to learn CSS. Or Flutter/React Native, you write in one language, and able to publish to platforms that require Java and Swift/Object-C.
I was amazed when seeing Remake. It's like a dynamic HTML.
All the best for Remake, David!
Let me know if you need any help getting set up. I can hop on a video call if you want.
It took me too long to figure out exactly what Remake is (note: I didn’t watch the video and I think most people won’t either). I got the general gist but it didn’t fully click until I saw some code. If I wasn’t coming from your hacker news post, I probably would have bounced. Vague copy like “It works by converting your webpage's visual elements into interactive data” didn’t really enlighten me.
In the live code example section, it would be helpful to be able to see the HTML, JSON data, and live preview all at once (I’m on mobile, not sure if this is different on desktop) to illustrate the connections between each of them. This relationship seems to be the highlight of your product, so highlight it. If this change was implemented and the section was placed up near the top of the page, maybe just below the fold, I would have understood immediately.
Other than the code, the graphic showing the dentist website builder with edit buttons and explanatory callouts did the most to clarify what this tool does, but it also confused me a bit. I suddenly wasn’t sure if Remake was meant specifically as a tool to create site templates that others can customize or as a general purpose framework for creating interactive applications. My understanding now is that it seems the latter enables the former, and more. If this graphic technique was used in the context of the trello example, I don’t think I would have had this confusion. All that said, I do think this graphic technique is much more effective than just showing screenshots of the 3 example projects, maybe you could add some callouts to those images too to show exactly what Remake is enabling in each of them.
Regarding UX on mobile, the testimonials section is causing layout jank as the testimonial changes and causes the section to grow and shrink in height, repeatedly shifting all of the content below up and down by a few dozen pixels.
Final thoughts: Right now, I feel Remake is a bit unsure of its target customer. It seems split between people who know very little code (e.g. designers who know the basics of code and want a simple tool to increase their power), and people who know code well (e.g. web developers who want to save time but maintain flexibility). I think the landing page tries to appeal to everyone and falls a bit short on both. I certainly think it’s possible and smart to go for both and I think you’re very close, but you may benefit from targeting each of them more strategically.
All in all, great work! Hope my thoughts were somewhat helpful. Best of luck.
- I changed the vague copy you mentioned to be a little more technical, but also hopefully clearer
- I added underlines and backgrounds to the other tabs in the code demo, so it's more obvious they're clickable
- I added an animated, muted video in place of the first example app screenshot as an experiment. Does this work better or worse for you?
- I made the testimonials have a fixed height on mobile, so there's no layout jank
- Remake is definitely unsure of its customer. I want to go after both those markets. Any suggestions to improve the copy (or sections you'd like to see) in this area?
Thank you so much!
All the best