Do you know an IDE similar to Lazarus for HTML+CSS+JS?

[bhreis88]

Dear Lazarus community,

do you know an IDE similar to Lazarus for app development with HTML+CSS+JS?

If I use a search engine with the keywords "javascript" + "html" + "integrated development" (or "IDE"), all I get are the usual fancy text editors like Visual Studio Code and I cannot believe there is no tool similar to the Lazarus IDE for HTML+JS. The main similarity I am looking for is "drag and drop components on a form" and "selecting them at design time to edit properties/events visually". Of course, these terms are closely related to the Object Pascal world, but I do not understand why there would not be something like "drag and drop html elements on a DOM at design time and changing their properties visually".

I know about ElectronJS and how to transform an HTML+CSS+JS project into an executable app. But I am more interested in having a tool that helps the development visually at design time really.

Maybe I am just spoiled by the ease of use of Lazarus for Object Pascal and there is no similar tool for app development with HTML+CSS+JS. Or am I missing the correct keywords in my search?

Thank you for your attention!

[MarkMLl]

Might be worth looking at Kompozer. This was formerly part of the Mozilla nee Netscape suite, /way/ back Netscape had a fully-fledged Visual Javascript (similar to Borland's Intranet Builder) which has gradually fragmented into Kompozer (which might still be integrated into SeaMonkey) Venkman (?) and so on. I suspect that a lot of the good stuff was assimilated by Oracle.

Hope that helps, if nothing else by bringing various obscure names into the light of day which might be useful Google-fodder :-)

MarkMLl

[jwdietrich]

Kompozer is from its philosophy very different from the Lazarus IDE (as expected), but it is a useful editor – one of the few that allow both visual and sourcecode-based editing.

[xinyiman]

There is no such tool because the web adopts different logics with regard to graphics (if you want it responsive),

However, there are tools for individual frameworks. For example, in the past I worked with Bootstrap Studio, which allows you to graphically design your site (html only). For the rest you have to work on it by hand.

And if anyone knows some good tools, I'd be curious too.

[jwdietrich]

For example, in the past I worked with Bootstrap Studio, which allows you to graphically design your site (html only).

Thanks for your hint. The screenshots of this software look promising. I will give it a try.

[munair]

I've been using Bluefish on Linux for several years. Coming from Dreamweaver 8 I've tried alternatives such as Kompozer, but in the end Bluefish worked best for me. You have to be willing to do HTML coding, which gives you full control. You can define your website project and point to its directory structure. From there you can edit CSS, JS, PHP and such, all supported by syntax highlight. Next to it I use Filezilla for uploading via FTP.

[MarkMLl]

There is no such tool because the web adopts different logics with regard to graphics (if you want it responsive),

I know, and that is why I cited Kompozer as a useful starting point for research. Unlike the original (Borland) Intranet Builder and (Netscape) Visual Javascript, not to mention almost everything that has followed, it is fairly "backend-agnostic"... obviously that means that it doesn't have support for framework protocols etc.

Of course it's interesting that- as a specific example- client/server database technology has matured to the point that we have both a good understanding of what a generalised API needs to provide and specific APIs such as ODBC. I wonder whether web/browser-based client/server architecture will ever converge to the same extent, or if it's been irrecoverably broken by too many one-man bands promoting too many incompatible "good ideas".

MarkMLl

[john horst]

WYSIWG (keyword) or What You See Is What You Get... seems to be the kind of editor you are looking for. There is a few still out there but I cant recommend them. These always made bloated weird markup

[bhreis88]

Thanks a lot for the answers and the many different options!

I think Kompozer (thanks, MarkMLl!) is really the closest to what I expect.

Bootstrap Studio (thanks, xinyiman!) is interesting, but it is also paid and, of course, directly dependent on Bootstrap, which is not ideal.

Bluefish (thanks, munair!) looks like a good alternative to NetBeans, but both of these apparently do not provide the direct visualization and manipulation of html elements at design time that I am looking for.

As suggested by john horst (thank you!), there are many more hits with the WYSIWG keyword. I will see if among these there is an up-to-date alternative to Kompozer, but this might take a while. I might just stick with Kompozer for my purposes.

[tr_escape]

Actually Delphi has got html editor and it can be work on static pages.

But you can find a lot of alternatives :

https://hackr.io/blog/web-development-ide

[smitty]

do you know an IDE similar to Lazarus for app development with HTML+CSS+JS?

Bootstrap Studio

TMS Web Core works with Lazarus, and Elevate Web Builder is a RAD for client and server web applications.  If you was on Delphi then there is uniGUI and IntraWeb, but I don't believe they work with Lazarus.

Of course, all of the above are commercial and not free.

[Blade]

do you know an IDE similar to Lazarus for app development with HTML+CSS+JS?

Maybe not exactly what you want, but you might want to look more deeply into pas2js.

Retro Nick has done a YouTube series on it, which can help to get started.  One of his most recent videos, he has ported over a QBasic game to pas2js.

https://youtu.be/RhGlUizLHK4

[avra]

I am more interested in having a tool that helps the development visually at design time really.

Besides mentioned Lazarus support, TMS also supports VS Code as GUI editor: https://www.tmssoftware.com/site/blog.asp?post=722