5 ms·

Show HN: Tilepieces – An open source project for visually editing HTML documents

123 points by dinuovos 4y ago

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 https://pwa.tilepieces.net! I will be happy to receive any comments from you.

eloeffler 4y ago
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 4y ago
There is no server at the given link it seems.
gavinray 4y ago
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 4y ago
  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/projects.html#upload https://tilepieces.net/documentation/panels/package-manager/.... Zip a folder and start editing!
  - zachrip 4y ago
    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 4y ago
    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 4y ago
      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.
      - codegeek 4y ago
        same for me. I opened the demo playground and couldn't figure out what to do with the blank screen. It is very confusing as a new user.
        dinuovos 4y ago
        Certainly a lot can be done to make tilepieces more user friendly. I opened this category in the project discussions (https://github.com/tilepieces/tilepieces/discussions/categories/new-features https://github.com/tilepieces/tilepieces/discussions/categor...) to be able to hear your ideas better.
johnday 4y ago
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 4y ago
  Thank you so much for your feedback. Let me make some observations: The "package manager" (https://tilepieces.net/documentation/panels/package-manager.html 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/component.html 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 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 4y ago
    > The "package manager" (https://tilepieces.net/documentation/panels/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 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.
deleted 4y ago
[deleted]
skynet_123 4y ago
Well done. It's a really good project.
FreeHugs 4y ago
It gives me this error: error in reading settings (I'm using Firefox on Linux with uBlock Origin.)
- dinuovos 4y ago
  I created a template in the issue section of the project https://github.com/tilepieces/tilepieces/issues https://github.com/tilepieces/tilepieces/issues. If you have time, feel free to fill it in with your bug! I've been told something like this before, I think the error lies in your firefox privacy settings, but I can't be sure. Then, you use linux, I don't think you will have problems starting the node.js version (https://www.npmjs.com/package/tilepieces https://www.npmjs.com/package/tilepieces). You can see if the error keeps showing up
detritus 4y ago
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 4y ago
  I'd avoid advice from people who nitpick the living heck out of reasonable marketing phrasing.
diamondo25 4y ago
So its a WYSIWYG editor?
- dinuovos 4y ago
  The definition seems a bit limiting to me. However, I think Ckeditor is (https://ckeditor.com/ https://ckeditor.com/). You can find it in component format for tilepieces in the project https://github.com/tilepieces/component-examples https://github.com/tilepieces/component-examples.

123 points by dinuovos 4y ago

eloeffler 4y ago

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 4y ago

There is no server at the given link it seems.

gavinray 4y ago

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 4y ago
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/projects.html#upload https://tilepieces.net/documentation/panels/package-manager/.... Zip a folder and start editing!
- zachrip 4y ago
  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 4y ago
  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 4y ago
    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.
    - codegeek 4y ago
      same for me. I opened the demo playground and couldn't figure out what to do with the blank screen. It is very confusing as a new user.
      - dinuovos 4y ago
        Certainly a lot can be done to make tilepieces more user friendly. I opened this category in the project discussions (https://github.com/tilepieces/tilepieces/discussions/categories/new-features https://github.com/tilepieces/tilepieces/discussions/categor...) to be able to hear your ideas better.

johnday 4y ago

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 4y ago
Thank you so much for your feedback. Let me make some observations: The "package manager" (https://tilepieces.net/documentation/panels/package-manager.html 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/component.html 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 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 4y ago
  > The "package manager" (https://tilepieces.net/documentation/panels/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 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.

deleted 4y ago

[deleted]

skynet_123 4y ago

Well done. It's a really good project.

FreeHugs 4y ago

It gives me this error: error in reading settings (I'm using Firefox on Linux with uBlock Origin.)

dinuovos 4y ago
I created a template in the issue section of the project https://github.com/tilepieces/tilepieces/issues https://github.com/tilepieces/tilepieces/issues. If you have time, feel free to fill it in with your bug! I've been told something like this before, I think the error lies in your firefox privacy settings, but I can't be sure. Then, you use linux, I don't think you will have problems starting the node.js version (https://www.npmjs.com/package/tilepieces https://www.npmjs.com/package/tilepieces). You can see if the error keeps showing up

detritus 4y ago

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 4y ago
I'd avoid advice from people who nitpick the living heck out of reasonable marketing phrasing.

diamondo25 4y ago

So its a WYSIWYG editor?

dinuovos 4y ago
The definition seems a bit limiting to me. However, I think Ckeditor is (https://ckeditor.com/ https://ckeditor.com/). You can find it in component format for tilepieces in the project https://github.com/tilepieces/component-examples https://github.com/tilepieces/component-examples.