8 ms·

Show HN: Open-Source Page Block Builder with Remix and Tailwind CSS

155 points by alexandromg 4y ago

lyjackal 4y ago
Nice to see this. I’ve been looking for a wysiwyg form builder at work, but not seeing many options. One of the use cases that’s been hard to fill is dynamic content, using the block builder more as “template builder” for a canned set of data field, potentially with some simple conditional logic. Has anyone solved similar problems or know of any interesting resources?
- alexandromg 4y ago
  Thanks! That’s the aim for this block builder. See the Community block, if it’s type = "github” it loads my GitHub repo collaborators in the backend, and since Remix is SSR-first, I use that dataset to display them as members on the UI. In other words, you could use this to start creating advanced Form/List (CRUD) builders.
  - 0x62 4y ago
    It's great you've share this, I've been searching for something like it for a while. I've also struggling finding 'basic' wysiwgy builders, a lot of the existing solutions have trended towards adding as many features as possible.
- radiojasper 4y ago
  Beaver Builder, but you gotta use WordPress for the backend tho. Also it's not free, but SO worth the money if you do this all day.
- dominicwhyte 4y ago
  > I’ve been looking for a wysiwyg form builder at work If you're looking for something no-code but more powerful that traditional form builders, check out https://fillout.com/ https://fillout.com/ (disclaimer - I'm one of the founders) RemixBlocks looks cool, excited to see how it evolves. Our landing page is built with Tailwind and TailwindUI - would be interesting if you could import in an existing project
  - alexandromg 4y ago
    Thanks Dominic, your website is gorgeous and looks like a powerful tool! Are your direct competitors Typeform and Tally?
- totalhack 4y ago
- btown 4y ago
  https://github.com/react-page/react-page https://github.com/react-page/react-page is fully open source with a simple JSON data model and multi-language support; we’ve built various utilities for auto-generating content. Invest a few days in customizing CSS and you have a world-class WYSIWYG for your own design language. Highly recommend.
  - kennethh 4y ago
    Thanks, looks like a great start for lots of projects.
paales2 4y ago
Congratulations on the product. You take a fairly tight slice of the whole pie though, by limiting to Remix and Tailwind. In general I have a concern about these types of products. All these page builder products are so far from actual programming, that I feel like there is a huge chasm between pagebuilders and building custom components.. It seems like we're throwing something away that was valuable. "Pagebuilders are for marketeers and for actual valuable stuff come to the programmer" I see CMS'es that just provide fields and everything related to frontend markup is up to the developer. From there we jump into the world where the developer isn't contributing anymore and everything is done visually by the marketeer. I think these products aren't building up from the developer's work but skipping it's work and by doing that making these kinds of products less valuable.
- lioeters 4y ago
  Thoughtful comment.. It sounds like you see a need that's not being met, a potential for some software between a fully visual builder (for designers, marketers, content creators) and a code editor (for actual programming, developers building custom components). I'm curious how that would work, what features you imagine are missing from page builder products. On this topic of "visual web application builder", people often mention Hypercard, or Dreamweaver (with a lesser awe and respect :). I think these were able to bridge that gap between visual GUI and textual code, where both designers and developers can use the same tool across these different ways of representation.
  - 22289d 4y ago
    PG would call that a sitcom startup idea[1]. Sounds nice but who actually wants or needs that? Notice the parent commenter was not speaking from a position of wanting such a product. It just seems to them that it should exist. What a product like that would theoretically look like is a fully customizable codebase that has drag and drop components. So both the dev and the non-technical person can do everything they want to do. Thing is: that already exists. Wordpress is that. Along with many other open-source CMS products. The developer can dig in and change whatever they want to their hearts content. And usually they're not going to be happy with that either because of a) how hard it is to learn a huge and changing codebase someone else built and/or b) they're going to think those who built it made a bunch of bad choices and they'd rather just build it from scratch. So I suppose that provides us a theoretical window for a product that pleases both the content creators and the developers in that regard. It should probably be very easy to learn and customize. Something like: import { everythingToEveryone } from '@e2ejs'; import homeSpunUi from './bestUiEverBecauseThisDevWroteEverySingleLine.js'; import crapUi from './wordpressUiIfIdiotMarketeersWantIt.js'; import homeSpunComponents from './bestComponentLibraryEverBecauseThisDevWroteIt.js'; import garbageComponents from '/tailwinduiGarbageIfIdiotMarketeersWantIt.js'; // just gonna hardcode this until proven otherwise const idiotMarketeer = true; const cms = everythingToEveryone(); cms.ui = idiotMarketeer ? crapUI : homeSpunUi; cms.components = idiotMarketeer ? garbageComponents : homeSpunComponents; cms.mount(); A bare-bones, flexible skeleton through which the developer can load whatever they want, 3rd party or of their own creation. And content creators can use through any UI, with any 3rd party products the developer grants them permission to use - in my example, either one the dev rolled themselves, or Wordpress and TailwindUi. Do I want that or need it? Nope. Does anybody want or need it? Maybe, I guess. The same way maybe some people may want or need a Facebook for horse owners[1]. I'm not going to build it to find out. I'd rather solve an actual problem I have or someone is screaming for others to fix for them. [1] http://paulgraham.com/startupideas.html http://paulgraham.com/startupideas.html
orliesaurus 4y ago
If I understand this right, the advantage of using this over something like Webflow is that you can have code exported that you can customize much more rapidly and you are not locked in a vendor?
- jasonjmcghee 4y ago
  This does appear to be the angle. Which is nice from a "developer building a prototype" perspective, but if you're actually delivering to clients, something like Webflow means that the client can make changes themselves and not worry about patching future security vulnerabilities.
  - eastbound 4y ago
    Security vulnerabilities are particularly present in executable code; but if it generates a static site, it’s much less prone to vulnerabilities. I’ve seen Webflow or HubSpot site builders, but I’m reluctant to pay $20-to-200, depending on the website.
    - jasonjmcghee 4y ago
      Definitely- I assumed more than static sites as it specifically mentioned Remix, which is like Next.JS- intended to be used as a back and front end. But I do now see you can create static sites with this too.
lxe 4y ago
The quality puts this on the par with a ton of popular paid ones that do the same thing. Congrats!
superflows-dev 4y ago
Nice at first glance! Going forward, what would be the differentiating factors from several other such page builders out there?
aetherspawn 4y ago
I made my page but when I hit export it gave me a JSON file. I didn’t really know what to do with it. Was really hoping it would export raw HTML and CCS. Or if the JSON file is necessary, a complete project with the JSON file in it.
- theyknowitsxmas 4y ago
  I understand you replace everything after line 33 in app/utils/services/pages/defaultLandingPage.ts with the content of the json.
  - cuu508 4y ago
    OK, and next what? How do you get HTML+CSS?
theyknowitsxmas 4y ago
Good stuff. Quick rundown on how to implement an existing kit like TailwindUI?
deleted 4y ago
[deleted]
cujaneway 4y ago
Isn't it spelled "embedded" not "embeded" in the sub-title? Or is this an American spelling I'm unaware of.
codegeek 4y ago
I have been looking for Page Builders that can achieve 3 things together: 1. Great Content Creation/Editing Experience for a non technical person (Marketer, Admins etc). Give WordPress a run for their money when it comes to Editing and Content Creation Experience. 2. Ability to switch to Dev mode and edit code directly (For devs). Ideally be able to choose between frameworks. 3. Ultimately, publish as a static site (may be integrate with things like Netlify, Cloudflare Pages etc) So far, Most page builder products are either 1 and 2, 2 and 3 etc. Game changer would be a product that does all 3 seamlessly. I would totally invest in that :)
- volkandkaya 4y ago
  That is https://versoly.com/ https://versoly.com/ 1) Non-technical people can get setup without a developer 2) VS Code is built into the platform 3) Export as a static site if required I tried 5+ website builders for my last company in 2017/18 and in 2019 decided I could do better.
  - codegeek 4y ago
    Thanks. Does Versoly have an integration with static site hosts other than export option which of course is great. Ideally, I want to "Export or Publish" to my own connected hosts or providers like netlify, vercel etc.
    - volkandkaya 4y ago
      Not at the moment, the only option seems to be sync to github so i need to work out how to push changes to a repo.
- yaaang 4y ago
  https://www.plasmic.app/ https://www.plasmic.app/ has done this since its inception. It is a page builder that has drag and drop content editing, integrates with arbitrary codebases and modern frameworks like NextJS, and builds static (or non static) sites that are hosted on Vercel/Netlify/etc. (I work on this.)
anonymous344 4y ago
where 2 cols and 3 cols?
Existenceblinks 4y ago
I think the same editor and presentation at the same place here is not even better than WYSIWYG text editor because area of elements are large and arbitrary, moving them around is very confusing where it would end up, hard to comprehend big picture.

155 points by alexandromg 4y ago

Nice to see this. I’ve been looking for a wysiwyg form builder at work, but not seeing many options. One of the use cases that’s been hard to fill is dynamic content, using the block builder more as “template builder” for a canned set of data field, potentially with some simple conditional logic. Has anyone solved similar problems or know of any interesting resources?

alexandromg 4y ago
Thanks! That’s the aim for this block builder. See the Community block, if it’s type = "github” it loads my GitHub repo collaborators in the backend, and since Remix is SSR-first, I use that dataset to display them as members on the UI. In other words, you could use this to start creating advanced Form/List (CRUD) builders.
- 0x62 4y ago
  It's great you've share this, I've been searching for something like it for a while. I've also struggling finding 'basic' wysiwgy builders, a lot of the existing solutions have trended towards adding as many features as possible.
radiojasper 4y ago
Beaver Builder, but you gotta use WordPress for the backend tho. Also it's not free, but SO worth the money if you do this all day.
dominicwhyte 4y ago
> I’ve been looking for a wysiwyg form builder at work If you're looking for something no-code but more powerful that traditional form builders, check out https://fillout.com/ https://fillout.com/ (disclaimer - I'm one of the founders) RemixBlocks looks cool, excited to see how it evolves. Our landing page is built with Tailwind and TailwindUI - would be interesting if you could import in an existing project
- alexandromg 4y ago
  Thanks Dominic, your website is gorgeous and looks like a powerful tool! Are your direct competitors Typeform and Tally?
totalhack 4y ago
btown 4y ago
https://github.com/react-page/react-page https://github.com/react-page/react-page is fully open source with a simple JSON data model and multi-language support; we’ve built various utilities for auto-generating content. Invest a few days in customizing CSS and you have a world-class WYSIWYG for your own design language. Highly recommend.
- kennethh 4y ago
  Thanks, looks like a great start for lots of projects.

paales2 4y ago

Congratulations on the product. You take a fairly tight slice of the whole pie though, by limiting to Remix and Tailwind. In general I have a concern about these types of products. All these page builder products are so far from actual programming, that I feel like there is a huge chasm between pagebuilders and building custom components.. It seems like we're throwing something away that was valuable. "Pagebuilders are for marketeers and for actual valuable stuff come to the programmer" I see CMS'es that just provide fields and everything related to frontend markup is up to the developer. From there we jump into the world where the developer isn't contributing anymore and everything is done visually by the marketeer. I think these products aren't building up from the developer's work but skipping it's work and by doing that making these kinds of products less valuable.

lioeters 4y ago
Thoughtful comment.. It sounds like you see a need that's not being met, a potential for some software between a fully visual builder (for designers, marketers, content creators) and a code editor (for actual programming, developers building custom components). I'm curious how that would work, what features you imagine are missing from page builder products. On this topic of "visual web application builder", people often mention Hypercard, or Dreamweaver (with a lesser awe and respect :). I think these were able to bridge that gap between visual GUI and textual code, where both designers and developers can use the same tool across these different ways of representation.
- 22289d 4y ago
  PG would call that a sitcom startup idea[1]. Sounds nice but who actually wants or needs that? Notice the parent commenter was not speaking from a position of wanting such a product. It just seems to them that it should exist. What a product like that would theoretically look like is a fully customizable codebase that has drag and drop components. So both the dev and the non-technical person can do everything they want to do. Thing is: that already exists. Wordpress is that. Along with many other open-source CMS products. The developer can dig in and change whatever they want to their hearts content. And usually they're not going to be happy with that either because of a) how hard it is to learn a huge and changing codebase someone else built and/or b) they're going to think those who built it made a bunch of bad choices and they'd rather just build it from scratch. So I suppose that provides us a theoretical window for a product that pleases both the content creators and the developers in that regard. It should probably be very easy to learn and customize. Something like: import { everythingToEveryone } from '@e2ejs'; import homeSpunUi from './bestUiEverBecauseThisDevWroteEverySingleLine.js'; import crapUi from './wordpressUiIfIdiotMarketeersWantIt.js'; import homeSpunComponents from './bestComponentLibraryEverBecauseThisDevWroteIt.js'; import garbageComponents from '/tailwinduiGarbageIfIdiotMarketeersWantIt.js'; // just gonna hardcode this until proven otherwise const idiotMarketeer = true; const cms = everythingToEveryone(); cms.ui = idiotMarketeer ? crapUI : homeSpunUi; cms.components = idiotMarketeer ? garbageComponents : homeSpunComponents; cms.mount(); A bare-bones, flexible skeleton through which the developer can load whatever they want, 3rd party or of their own creation. And content creators can use through any UI, with any 3rd party products the developer grants them permission to use - in my example, either one the dev rolled themselves, or Wordpress and TailwindUi. Do I want that or need it? Nope. Does anybody want or need it? Maybe, I guess. The same way maybe some people may want or need a Facebook for horse owners[1]. I'm not going to build it to find out. I'd rather solve an actual problem I have or someone is screaming for others to fix for them. [1] http://paulgraham.com/startupideas.html http://paulgraham.com/startupideas.html

orliesaurus 4y ago

If I understand this right, the advantage of using this over something like Webflow is that you can have code exported that you can customize much more rapidly and you are not locked in a vendor?

jasonjmcghee 4y ago
This does appear to be the angle. Which is nice from a "developer building a prototype" perspective, but if you're actually delivering to clients, something like Webflow means that the client can make changes themselves and not worry about patching future security vulnerabilities.
- eastbound 4y ago
  Security vulnerabilities are particularly present in executable code; but if it generates a static site, it’s much less prone to vulnerabilities. I’ve seen Webflow or HubSpot site builders, but I’m reluctant to pay $20-to-200, depending on the website.
  - jasonjmcghee 4y ago
    Definitely- I assumed more than static sites as it specifically mentioned Remix, which is like Next.JS- intended to be used as a back and front end. But I do now see you can create static sites with this too.

lxe 4y ago

The quality puts this on the par with a ton of popular paid ones that do the same thing. Congrats!

superflows-dev 4y ago

Nice at first glance! Going forward, what would be the differentiating factors from several other such page builders out there?

aetherspawn 4y ago

I made my page but when I hit export it gave me a JSON file. I didn’t really know what to do with it. Was really hoping it would export raw HTML and CCS. Or if the JSON file is necessary, a complete project with the JSON file in it.

theyknowitsxmas 4y ago
I understand you replace everything after line 33 in app/utils/services/pages/defaultLandingPage.ts with the content of the json.
- cuu508 4y ago
  OK, and next what? How do you get HTML+CSS?

theyknowitsxmas 4y ago

Good stuff. Quick rundown on how to implement an existing kit like TailwindUI?

deleted 4y ago

[deleted]

cujaneway 4y ago

Isn't it spelled "embedded" not "embeded" in the sub-title? Or is this an American spelling I'm unaware of.

codegeek 4y ago

I have been looking for Page Builders that can achieve 3 things together: 1. Great Content Creation/Editing Experience for a non technical person (Marketer, Admins etc). Give WordPress a run for their money when it comes to Editing and Content Creation Experience. 2. Ability to switch to Dev mode and edit code directly (For devs). Ideally be able to choose between frameworks. 3. Ultimately, publish as a static site (may be integrate with things like Netlify, Cloudflare Pages etc) So far, Most page builder products are either 1 and 2, 2 and 3 etc. Game changer would be a product that does all 3 seamlessly. I would totally invest in that :)

volkandkaya 4y ago
That is https://versoly.com/ https://versoly.com/ 1) Non-technical people can get setup without a developer 2) VS Code is built into the platform 3) Export as a static site if required I tried 5+ website builders for my last company in 2017/18 and in 2019 decided I could do better.
- codegeek 4y ago
  Thanks. Does Versoly have an integration with static site hosts other than export option which of course is great. Ideally, I want to "Export or Publish" to my own connected hosts or providers like netlify, vercel etc.
  - volkandkaya 4y ago
    Not at the moment, the only option seems to be sync to github so i need to work out how to push changes to a repo.
yaaang 4y ago
https://www.plasmic.app/ https://www.plasmic.app/ has done this since its inception. It is a page builder that has drag and drop content editing, integrates with arbitrary codebases and modern frameworks like NextJS, and builds static (or non static) sites that are hosted on Vercel/Netlify/etc. (I work on this.)

anonymous344 4y ago

where 2 cols and 3 cols?

Existenceblinks 4y ago

I think the same editor and presentation at the same place here is not even better than WYSIWYG text editor because area of elements are large and arbitrary, moving them around is very confusing where it would end up, hard to comprehend big picture.