Styled Page (Discontinued)

Phew - SP can now load larger Gatsby apps such as the Reactjs.org website.
It's definitely not perfect yet (e.g. the CSS prop on the right shouldn't have to be edited manually, but through the visual interfaces below) but I feel great about the potential for designers and developers to collaborate on production apps.

Here's a screenshot:

Man, creating this dashboard where customers can change their plan myself was such a pain. So I'm happy to switch to Stripe's managed dashboard. It wasn't a lot of work to switch, but then by now I'm very familiar with Stripe and their API's.

This is what the flow looks like now:

You can now WYSIWYG-style edit text and properties, while editing code at any time for maximum flexibility.

This is a big deal because over time it further narrows down the gap between designers, non-technical persons and programmers.

I've uploaded the first version of the new landing page! I'm happy this finally got done, as I have some incoming links to the site. Visitors used to see a server error message before, because I have been busy migrating the old landing page. So SEO juice should now start flowing in again.

The page is built using Styled Page itself. I started from a GatsbyJS template, uploaded ("pushed") it to the platform and then gradually changed styles and the layout using the visual editor. I do switch to code mode from time to time as that's sometimes faster. (The editor reads and writes code.)

Here's a screenshot of the editor:

Peace out,
Nick

Styled Page now supports GatsbyJS! This means you can now build static sites and edit them visually online. I scratched my own itch here as I was in need for a static site but still wanted to build it visually, and using React.

You can see a first site built with the tool on https://laska.io/
It's really neat as I can push/pull code as I want, use any NPM component and have it visually rendered online, all while being able to use GatsbyJS without any downsides.

Here's a screenshot of the editor:

The actual landing page for Styled Page is still underway, stay tuned!

Until now, the editor was tailored towards people that are new to building web applications. This can work, but I've found that I have to create a ton of tutorials and help content in order to make this work.

Based on feedback from React developers, I'm trying an experiment to cater towards React developers: the ability to visually edit (WYSIWYG-style) new and existing React apps and websites, while maintaining the ability to edit code at any time. I haven't seen this in other editors (others only provide exporting code) and while hard to pull off, this can actually work.

MVP Demo

The goal is for React developers to shave off valuable development time by 20-50%. Companies can thus potentially save thousands of dollars of engineering time using this tool.

The engineers themselves save time by

• instantly seeing what they are building
• not having to write imports
• not having to write JSX code
• not having to look up which props are available for every component
• not having to guess what data structure the props are
• not having to write styling code themselves

Engineers don't lose any abilities. There's no "catch". They can always continue coding if they prefer. In other tools, they'd be stuck at this point since the export function is one-way only. As an additional bonus, non-technical people can collaborate with engineers.

As a first test I'll be focusing on the Semantic UI framework as I have some experience with it.