Which page builder/theme editor for SaaS users?

by evandempsey

Hi,
In the app I am building, users need to be able to design their own pages. Does anybody know of a good library or plugin to give them this functionality?

Ideally, they would be able to compose pages of pre-defined blocks, edit their properties (colours, font, etc.), preview and save. It has to be simple for non-technical users, but allow a high level of customisation for people who know how to edit HTML and CSS.

Does such a thing exist as an easy-to-integrate library (for React, preferably)?

Thanks

on July 6, 2020

Say something nice to evandempsey…

1

Hey this sounds like a great use case for something I've been working on, https://www.everypagehq.com, an open source landing page builder. We haven't publicly announced it yet but the code is available at https://github.com/kibalabs/everypage and can be used as an npm library. I'd be glad to show you how if you think its relevant :)

krishan711

·
5 years ago
·
Reply
1. 1
  
  Oh I should have said: open source REACT landing page building library
  
  krishan711
  
  ·
  5 years ago
  ·
  Reply
  1. 1
    
    React or Next ? Hi Krishan, can I use this within my SaaS?
    
    nimkuski
    
    ·
    3 years ago
    ·
    Reply
1

https://grapesjs.com/

I wasn't a fan so we built our own http://versoly.com/

volkandkaya

·
6 years ago
·
Reply
1. 1
  
  Just wondering how this is going for you?
  
  In the end, I hand-rolled something to fit my use case, but your product looked cool.
  
  evandempsey
  
  ·
  5 years ago
  ·
  Reply
  1. 1
    
    Going good but slowly than I thought as always.
    
    Got a video of it working? I'm always interested in website builders :)
    
    volkandkaya
    
    ·
    5 years ago
    ·
    Reply
    1. 1
      
      I'm working on the video demo for it, but although it is functionally pretty much complete I need to improve the UI.
      
      The basic architecture is as follows:
      
      Pages are defined as a hierarchy of components in JSON.
      Themes written in the Liquid templating language and editable by the user define how the JSON is translated into HTML and CSS.
      The user adds components and edits their properties in a side panel. This is a React component.
      The page is then rendered by providing the component hierarchy as context to the liquid templates. The result is injected into a iframe preview pane as src.
      Other scripts are injected into the iframe so that clicks on components in the iframe dispatch events that the sidebar can listen to and update its state.
      It works very similar to Shopify's store editor.
      
      evandempsey
      
      ·
      5 years ago
      ·
      Reply
2. 1
  
  Thanks. I'll take a look.
  
  evandempsey
  
  ·
  6 years ago
  ·
  Reply
3. 1
  
  This comment was deleted 3 years ago.
  
  nimkuski
  
  ·
  3 years ago
  1. 1
    
    Thanks, no.
    
    volkandkaya
    
    ·
    3 years ago
    ·
    Reply
    1. 1
      
      This comment was deleted 3 years ago.
      
      nimkuski
      
      ·
      3 years ago

Trending on Indie Hackers

How I built an AI workflow with preview, approval, and monitoring

64 comments Show IH: I'm building a lead gen + CRM tool for web designers targeting local businesses without websites — starting with Spain

62 comments I built a URL indexing SaaS in 40 days — here's the honest story

53 comments After 4 landing page rewrites, I finally figured out why my analytics SaaS wasn't converting

21 comments We witnessed a sharp spike in our traffic. So much happiness after a long time.

15 comments I'm a solo founder. It took me 9 months and at least 3 stack rewrites to ship my SaaS.