Show HN: Open-Source Page Block Builder with Remix and Tailwind CSS | Hacker News Reader

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

remix-page-blocks.vercel.app

155 pointsalexandromg43 comments

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.

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.

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

Great comment. Thank you!

> I'd rather solve an actual problem

Isn't all these components a solution to some actual problem, but just not your problem.

Could you give an example of the type of actual problem you are thinking about? Then we could discuss why there is no component that solves it already?

I was not referring to the submitted product but to the comment above:

>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.

What I meant was that the chasm doesn't really exist, as you can theoretically already do anything you want with an open source CMS. Building another one wouldn't bridge that chasm it'd just provide yet another CMS product to an already crowded market.

> Could you give an example of the type of actual problem you are thinking about? Then we could discuss why there is no component that solves it already?

Personally, I don't have any. The CMS landscape is filled with all sorts of awesome packages (including perhaps the one submitted here, I haven't tried it yet). My approach is to roll my own with a bunch of individual pieces that others have built (like the TipTap editor). So basically the fictional EverythingToEveryone but without someone providing me a wrapper.

I’m not saying you’re wrong, but I think you are suggesting a very poor solution to argue that no one wants to have the problem solved? Maybe there are good solutions waiting to be discovered. I think it’s abundantly clear that lots of organizations would have use for a smoother way to collaborate between developers, designers and content creators.

Yeah he said "theoretical window". So founders take the risk.

I’ve never met a designer that could color within the lines for more than a day or two. Everything has to be special and custom always.

Why?

I couldn’t tell you.

To colour within the lines, the designer needs to fully understand what the dev limitations are, which are often complex to summarize and a moving target. How do you easily explain what CSS can do natively in most browsers for example?

Often I see designers work in isolation to get something signed off for development and then the developer gets lumped with coding it however tricky it might be.

My view is designers and developers need to iterate and work closely together from the very start to develop an understanding of what's practical and make compromises both ways vs it being a one way street.

A good wake up call comment for founders. Maybe some human do it to themselves, reality of people don't accept technical solutions throwing at them, because some human behaviour prevents it.

I'd love to see a page builder that allows creating custom components via a templating language like Mustache

Do you think server-side template is better than those React components based site builder? (I hate React with passion)

The problem you're describing is exactly why I'm working on https://primo.so.

WordPress makes content editing easier, but damages the developer experience. So devs reach for JS frameworks in search of more productivity, but then the content editing experience suffers.

I found the solution was to embed a code editor in the CMS itself. As strange as it sounds, removing the distance between the content and code means that devs can build and modify components and whole sites (which are made of both) in a tenth of the time while giving content editors the page-building powers they love.

can site managed by this primo somehow be editable by 2 different persons at the same time?eg. different pages but same site

not yet, that's one of the next things we're working on.

There are other approaches. Tools like https://www.plasmic.app/ give you a drag and drop page builder, but integrated into your codebase so that you can drag and drop your own React components for instance - exactly so that you can build upon rather than circumvent developers' work, while letting marketing/design/product/ops/etc directly edit websites and applications. (I work on this.)

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 :)

That is 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.

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.

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.

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.)

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?

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.

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.

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.

> 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/

(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

Thanks Dominic, your website is gorgeous and looks like a powerful tool! Are your direct competitors Typeform and Tally?

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.

Thanks, looks like a great start for lots of projects.

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.

I understand you replace everything after line 33 in app/utils/services/pages/defaultLandingPage.ts with the content of the json.

OK, and next what? How do you get HTML+CSS?

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.

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

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?

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.

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.

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.

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

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

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

where 2 cols and 3 cols?

Reply on news.ycombinator.com