Swizec Teller - a geek with a hatswizec.com

Senior Mindset Book

Get promoted, earn a bigger salary, work for top companies

Senior Engineer Mindset cover
Learn more

    React Bricks - visual blocks editor for NextJS #CodeWithSwiz 22

    Tried a new visual editor for NextJS and CreateReactApp. Got a site up in 20min 🤘

    CodeWithSwiz is a weekly live show. Like a podcast with video and fun hacking. Focused on experiments and open source. Join live Mondays

    A friend asked me to try React Bricks and honestly I was skeptical. Visual website builders. Pfft. What self-respecting web developer uses a WYSIWYG?

    Give me markdown or give me death.

    And then we got this page up in 20 minutes. It's pretty, easy to edit, and anyone can use it to run experiments. No custom code.

    USh3X7pnghj01jg

    We even got the founder to leave a totally real review.

    Definitely real review
    Definitely real review

    How it works

    React Bricks is currently in beta and worth a try. Going to be a paid tool when it's ready.

    Start with a CLI command to create a new site and follow the prompts:

    $ npx create-reactbricks-app
    

    You get a NextJS project (or CRA) configured to use with React Bricks. Beautiful default setup using Tailwind and a couple bricks to show what's possible.

    There's the usual suspects like hero headers, testimonials, email signup, image with left-text, FAQ, etc. Everything you need for a generic yet decent landing page.

    Copy is what matters 😉

    Click the edit button, login with your React Bricks account, and you get a visual editor.

    Visually editing a Brick

    Typical visual editors suck. They're fiddly. Click the wrong thing and lose all your work kind of fiddly.

    But this one was nice. Felt stable. I couldn't get it to lose my work.

    Except that one time I didn't notice a required field and couldn't save and refreshed the page. But that's on me.

    Deploy

    When you're happy with the page, Vercel is your friend.

    $ vercel
    

    Page goes live and becomes a typical NextJS site. Render-on-demand, cached for speed, HTML has all the content.

    Editor works on your live page. No need for local dev environments 🤘

    You have to re-deploy for changes to go live.

    Go live button

    A deploy webhook gives you the Go Live button. Anyone can press this without engineering skills and that's love.

    React Bricks deploy screen
    React Bricks deploy screen

    We set this up on stream.

    Go into Vercel dashboard, integrate with Git. You don't have git-based version control because of the visual editor, but okay Vercel likes it that way.

    Then you create a hook and paste it in React Bricks settings.

    Vercel deploy hook
    Vercel deploy hook

    You'll need to set up your API key as a secret on Vercel. Automated deploys get an error otherwise, but not when you deploy manually. Not sure how that works 🤔

    React Bricks api key env vars
    React Bricks api key env vars

    Anyone with edit access to your site can deploy changes. No dev environment required. Great when you're traveling and find a typo.

    The mechanics, probably

    React Bricks is closed source so this is a guess. I'll ask Matteo if I'm close :)

    The visual editor itself is made of unicorns and magic.

    Controls on the right are component props. Every change triggers a re-render because React.

    When you hit Save, a JSON representation of each component's props and children saves to a database. A JSON for page structure describes the bricks order.

    Something like this:

    {
    	type: "page",
    	name: "Home",
    	bricks: [
    		{
    			type: "hero",
    			props: [
    				layout: "white",
    				borderTop: "none",
    				...
    			],
    			children: [
    				...
    			]
    		}
    	]
    }
    

    Then there's the [slug].tsx component that represents each page. You can see it here.

    There's a getStaticProps that phones home and fetches this JSON. The page then uses a <PageViewer> component to render.

    export const getStaticProps: GetStaticProps = async (context) => {
      const { slug } = context.params
      const page = await fetchPage(slug.toString(), config.apiKey)
      return { props: { page } }
    }
    
    const Page: React.FC<PageProps> = ({ page }) => {
      // ..
    
      return (
        <Layout>
          // ...
          <PageViewer page={pageOk} />
        </Layout>
      )
    }
    

    Neat trick.

    Works great because NextJS is smart enough to call this once. First visitor gets a slow page, everyone else gets blazing speed.

    But Why?

    Adrian said it best on stream:

    I got tired of building 100 wordpress pages every year and hired a bunch of people. Became an agency and now I can focus on my unique value props. This would make everything easier.

    He's right. Landing pages are the lettuce of webdev. Don't craft that shit by hand. You've got interesting things to do.

    Like creating custom bricks 😍

    Cheers,
    ~Swizec

    PS: this is not an ad but the founders did ask me to check it out through a friend

    Published on February 9th, 2021 in CodeWithSwiz, Technical, NextJS, Vercel, Livecoding

    Did you enjoy this article?

    Continue reading about React Bricks - visual blocks editor for NextJS #CodeWithSwiz 22

    Semantically similar articles hand-picked by GPT-4

    Senior Mindset Book

    Get promoted, earn a bigger salary, work for top companies

    Learn more

    Have a burning question that you think I can answer? Hit me up on twitter and I'll do my best.

    Who am I and who do I help? I'm Swizec Teller and I turn coders into engineers with "Raw and honest from the heart!" writing. No bullshit. Real insights into the career and skills of a modern software engineer.

    Want to become a true senior engineer? Take ownership, have autonomy, and be a force multiplier on your team. The Senior Engineer Mindset ebook can help 👉 swizec.com/senior-mindset. These are the shifts in mindset that unlocked my career.

    Curious about Serverless and the modern backend? Check out Serverless Handbook, for frontend engineers 👉 ServerlessHandbook.dev

    Want to Stop copy pasting D3 examples and create data visualizations of your own? Learn how to build scalable dataviz React components your whole team can understand with React for Data Visualization

    Want to get my best emails on JavaScript, React, Serverless, Fullstack Web, or Indie Hacking? Check out swizec.com/collections

    Did someone amazing share this letter with you? Wonderful! You can sign up for my weekly letters for software engineers on their path to greatness, here: swizec.com/blog

    Want to brush up on your modern JavaScript syntax? Check out my interactive cheatsheet: es6cheatsheet.com

    By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❤️

    Created by Swizec with ❤️