#buildinpublic update:

✅ Added ability to nest components.
✅ Added a command palette to quickly add elements

Next step: components props and variants!

@lithiumbuilder

#buildinpublic update:

✨ Importing images is instantaneous. No loading spinners at all.

How it works:
1. Data obtained from the clipboard is converted to a blob url that is used to display the image immediately.
2. Image is then saved in the background.

#buildinpublic update:

✨ Added SVG image support
✨ Added keyboard shortcuts to move elements within a flex controller using arrow keys.

#buildinpublic update:

Nothing visual to show this time...

✅ Refactored the local file format from json to SQLite.
🛠 Currently working on image handling.

Turns out uploading and displaying images in Electron is not as straightforward as I thought.

#buildinpublic update:

✨ Added the ability to resize images by dragging the corners.

Just 1 of the many things to do for image manipulation.

@lithiumbuilder update:

Finally able to add images to the canvas. One more step towards the MVP.

Saving and displaying local images in Electron is not as simple as uploading to a webserver.

#buildinpublic

Is it a good idea to go with the traditional one-time payment model, if all your competitors are doing subscriptions?

For a desktop app + indie maker that is.

#buildinpublic

Attempting to build my landing page using my own app today.

Failed miserably. Still lots of work to do. 😄

#buildinpublic

Hi Twitter friends, should I start working on SEO even though my product's not ready?

I feel like I should get the ball rolling already.

#buildinpublic

Managed to repackaged Lithium as a web app. My current work is now live!

Feel free to check it out and give comments!

#buildinpublic

@arvidkahl For #buildinpublic wisdom, I have you Arvid!

🔋Lithium update:

Just finished the borders panel. I can finally add borders to elements!

The initial design was clunky so I did a bunch of rework.

What you see now is the 3rd iteration.

Here's how I derive at this final design: 👇🧵

#buildinpublic

#buildinpublic update:

Finally done with the Flexbox panel.

I've decided to keep the UI simple by supporting only the essentials: flex direction, alignment, wrap and gap.

I'll be hiding the rest of the advanced flexbox options using a popup.

Next: the Borders panel!

#buildinpublic update:

Finished the number + unit combo field.

It may not look like much but it's important that it works well:
✨Sanitizes input
✨Autocompletes CSS units (just like VScode)
✨Nudge values up/down (shift key for big increment)

Fellow devs: do you use flex `align-content` at all?

I find that I can do everything with `justify-content` + `align-items`.

I'm trying to decide if @lithiumbuilder should support `align-contents`. Appreciate your feedback!

#buildinpublic, #webdev

#buildinpublic update:

The Flexbox widget is integrated into the editor and it's working great.

Centering a <div> has never been this fast. 😂

#buildinpublic update:

2nd iteration of the Flexbox alignment widget:

Advanced alignment options can now be quickly set by clicking on the x and y axis labels of the widget.

Also added some tooltips.

Almost done the Flex Layout component.

Quite happy with the result.

#buildinpublic

#buildinpublic update:

Here's mockup of what I'll be working on next: the Flex layout panel.

It's kind of similar to Figma's, but with an improvement:

You can Alt-click to quickly switch between 'packed' alignments and 'space-between'.

Spent 2 hours designing my twitter banner and profile pic. That's considered marketing right? 😅

#buildinpublic