HN Explorer

Show HN: Tilepieces – An open source project for visually editing HTML documents (tilepieces.net)

123 points by dinuovos ↗ HN
Hi all, My name is Simone Di Nuovo and i'm the creator of tilepieces, an open source project to visually editing HTML documents and Web applications.

Tilepieces is a software that allows you to create applications for editing HTML documents, using some of the popular interfaces of the browser developer tools (with which it is possible to integrate css edits).

Tilepieces also allows you to reuse your favorite code and libraries, and exposes APIs that are useful for editing multiple files at a time. You can start using tilepieces with its progressive web application version at https://pwa.tilepieces.net!

I will be happy to receive any comments from you.

21 comments

[ 2.9 ms ] story [ 56.1 ms ] thread
gavinray
Interesting, thanks for sharing =)

One suggestion: On the PWA playground, it would be nice if it loaded into a fully set up example app

I was expecting something like this (or a button like "LOAD EXAMPLE"/EXAMPLES") but it opened to an empty workspace

dinuovos
Thank you so much for your feedback. what you say makes a lot of sense. I take this into consideration, but it must also be borne in mind that if I load templates into the PWA, the user has to install them every time (although maybe you could do some smart caching, but that's not the only point) and the same thing who use the node.js version.

Please note that you can upload an existing project -> https://tilepieces.net/documentation/panels/package-manager/.... Zip a folder and start editing!

zachrip
I went to the "try online" immediately and couldn't figure out how to do anything, I even opened my console expecting an error..could pass a query param with that button that pops up some help text or something to get started.
cssinate
Came to say the exact same as the other replier to this comment. Jumped right in to demo it and couldn't figure out what to do so I gave up.
dinuovos
Thank you for your feedback. What a pity that you gave up. If you want you can continue watching the rest of the site. The videos in my opinion are very beautiful and descriptive. My partner did them all. You can find them all on the youtube channel.
johnday
Well done, seems like a cool project!

A couple of comments right out of the gate on the UX/UI:

- Why is the place where you create and browse projects called the "package manager"? I opened that expecting to find plug-ins or similar. (Might just be a language barrier issue.) "Projects view" or similar would be a better term.

- The window-centric design aesthetic is quite unwelcoming to new users, especially if you have to start by opening some specific subset of the windows. Prefer some automated layouts, and preferably some kind of way to snap windows into panels photoshop-style.

- If you are going to stick with a windows-first aesthetic, it's important that those windows behave as ergonomically as possible. For example, if I click within a window, that window should come to the front if multiple windows overlap.

Best of luck with continued development!

dinuovos
Thank you so much for your feedback. Let me make some observations: The "package manager" (https://tilepieces.net/documentation/panels/package-manager....) is not only used for projects, but also to create / load / export components (https://tilepieces.net/documentation/data-structures/compone...), and to set the global properties of the application. So I think "Package Manager" is more appropriate than "Projects view".

As for the windows (I think you talk about panels -> https://tilepieces.net/documentation/UI/panels.html) they can be set right, left, above, below (they are fixed below 1024px). They are certainly a bit .. rough/raw/sketched i think you could say... as everything to the UI, but at the moment I think the important thing is that they work.

The third point you are referring to is a bug! I swear it worked until yesterday :)!

johnday
> The "package manager" (https://tilepieces.net/documentation/panels/package-manager....) is not only used for projects, but also to create / load / export components (https://tilepieces.net/documentation/data-structures/compone...), and to set the global properties of the application.

Is there a reason to have that functionality exist in the same view? It feels like the benefit of a window ("panel") based UI is that you can dedicate each group of functions to one window and not need to combine different jobs into the same panel.

dinuovos
Because projects and components go together. After creating a project, you can use components in its HTML pages. So I think it's best to put them together. You can find pre-made components in this repository https://github.com/tilepieces/component-examples/ Where possible, I try to put the related features in one panel, as too many panels can be confusing (even in the developer's mind!). Anyway, if you have ideas for improving tilepieces, I have opened a "new features" category in the github discussions (https://github.com/tilepieces/tilepieces/discussions/categor...). I will gladly listen to them.
[deleted]
(comment deleted)
skynet_123
Well done. It's a really good project.
FreeHugs
It gives me this error:

    error in reading settings
(I'm using Firefox on Linux with uBlock Origin.)
detritus
I'd avoid using the repeated phrase 'the best' as it's hard (/impossible) to qualify practically or in terms of comparative metrics. I'm sure what you've done is very good, but I'd be very wary of claims of it being 'the best'.
jrm4
I'd avoid advice from people who nitpick the living heck out of reasonable marketing phrasing.
eloeffler
Hi, looks nice :)

I've been skimming through the videos and the tutorial for adding and removing css rules seems to have the wrong video linked ("editing html text and img")

Rovoska
There is no server at the given link it seems.