Share your repls and programming experiences

← Back to all posts
Easy graphical HTML/CSS editor! 💻‍✏️
19wintersp (1142)

VisualHTML

A visual HTML document creator

A (hopefully) easy-to-use web app for creating webpages in HTML!

This is a basic tool for easy creation of (theoretically) syntactically correct HTML documents, along with a basic CSS creator. (Yes, I know there's one missing, the visual Flash ActionScript JavaScript editor is coming soon)

You can create your document in the HTML tab; to get started, click on "body" and press "Add child". You can then select what element you like. To add text content to an element, choose "Text node" when adding the child. Elements can be dragged around in the element tree. You can add styling with the CSS tab. Documents are saved to LocalStorage automatically, and the preview window is updated automatically too. You can download your finished files from the files tab.

Try it out!

If you're having issues with the modern code, use the Babel compatibility version.

Comments
hotnewtop
LeviathanCoding (1599)

Nice, but I'd prefer coding in raw HTML/CSS/JS.

proryan (75)

@LeviathanCoding I think now there is a option for that...

maxina (65)

That's actually VERY cool in my opinion. Everyone upvote this.

SudhanshuMishra (252)

I pressed the upvote button 101 times

elburg (42)

looks pretty nice!

proryan (75)

I llllike iiiiiiiiit...

Whippingdot (678)

Very nice. I love the look of it, the light to dark button, I like the way you can drag and drop, I like the easiness to move around...Etc.

Breeze0505 (19)

It doesnt show in the preview box for me

19wintersp (1142)

@JaceBillingsley You may have to press "Run", though I suggest opening it in a new tab.

Baconman321 (1103)

Optional chaining no work for me :(

You should use a transcompiler like babel!

Or include a polyfill...

19wintersp (1142)

@Baconman321 What browser are you using??? Working on Babel now...

Baconman321 (1103)

@19wintersp Chrome 77 I think.

How do you even use babel?

Do you have to install it in nodejs and then it reads a file and changes it?

19wintersp (1142)

@Baconman321 I'm just using their "Try it" section of the website. :) Also, you should update your browser if you can, you're 11 versions behind.

Baconman321 (1103)

@19wintersp I know it's quite behind, but 77 came out about 1 and a half years ago, which isn't that old.

It's my school computer, they don't update much...

Probably because newer versions mess up their spyware monitoring software.

xxpertHacker (931)

@Baconman321

1 and a half years ago, which isn't that old.

That is old.

Baconman321 (1103)

@xxpertHacker Oh yeah, sure.
Tell that to the people still using chrome 30!

I bet there are people who still use it.

Chrome 77 isn't that old, but old enough to give me the urge to yell at the school to update it...

Again, I guess their good ol' spyware monitoring software doesn't function well with newer versions, or they have another reason for not updating to a newer browser version...

xxpertHacker (931)

@Baconman321

Tell that to the people still using chrome 30!

I bet there are people who still use it.

How much are you willing to bet? I'd like to make some $ off of you today.

Baconman321 (1103)

@xxpertHacker All I need is 1 out of the 310 million people who use chrome 30...

Maybe not exactly chrome 30, but something older than chrome 40...

19wintersp (1142)

@Baconman321 Seems like Babel has worked... could you check? Here's the Babel version

xxpertHacker (931)

@Baconman321 Chrome is an evergreen, automaticially updating browser; no one uses Chrome 40 :/

Baconman321 (1103)

@19wintersp Nice!
But... how do you code?

XD I can't find out how to type html...

Baconman321 (1103)

@xxpertHacker You can disable updates.
I bet there is at least 1 person tho...
At least 1 computer that has it...

Eh, doesn't matter anyways, chrome 77 isn't that old.

Still, I'd rather have a newer version since so much changes in a year (a reason why it's so hard to be a web developer, so much changes so fast).

19wintersp (1142)

@Baconman321 It's all* graphical, click on an element in the tree, and press "Add child" to add an element. You don't get to type any raw HTML. :)

Baconman321 (1103)

@19wintersp Nice, but you really should add the option to type in html.

While it's really cool (not joking), it needs efficiency.

Selecting a node from a list isn't efficient.

At least give the option to type in html...

:/

19wintersp (1142)

@Baconman321 Kinda defeats the point :/ It's supposed to stop people from typing raw HTML and making syntax silliness.

Baconman321 (1103)

@19wintersp But you are defeating the main point of a typed language.

Also how come it downloads a vhtml file.

How do you even make it download the file???

Oh, a download link...

Ok...

19wintersp (1142)

@Baconman321 Actually, I think I will give the option. I'll add "raw html" to the node types, and allow importing HTML files.

Baconman321 (1103)

@19wintersp This deserves more recognition tho....

Yeah, also make the ability to delete the entire html file.

After all, while most of the time it isn't required, sometimes having no body is wanted...

19wintersp (1142)

@Baconman321 No body in a HTML document? Also, turns out I've already accidentally implemented the raw HTML in the Text node system. 😅

xxpertHacker (931)

@Baconman321 Web dev is ez, it gets easier over time, since there's new, cool tech.

Also, usually updates make stuff simpler, ex:
old js:

var temp = foo();
var x = temp.x;
var y = temp.y;

moderately old js:

const { x, y } = foo();
Baconman321 (1103)

@xxpertHacker True, true.

Still, sometimes it's just really hard.

I'd rather not have to come back to my every project in a few years because one thing is deprecated.

I guess that's what transcompilers are for as well...

Baconman321 (1103)

@19wintersp Google verification gives you the option to put a html file in your website which is only a string of text...

xxpertHacker (931)

@Baconman321 Well, they never deprecated native code, guess it's just s scripting language problem that I can't relate to.

*cough, C isn't deprecated, use Wasm

Baconman321 (1103)

@xxpertHacker Yeah.

Wait, question since ur here.

I want to know how to make an app in C or C++ (or Go or another compiled language).

Let's say for windows.

I can compile... let's say... Go to an exe file.

Can I just run that exe file anywhere, or would I need a Go.
compiler/linker/whatever.

In other words, can I run a compiled binary without the compiler, or does it need to be run through a linker or something else?

I want to set up an "app" using Go and I want to be able to just execute it anywhere...

Oh and also, when an exe file opens a window on the computer, how does it do that?

My assumption is that it needs some stdout stream to open a window and write to it...

19wintersp (1142)

@Baconman321 Most binaries are standalone, so they are run without another program. Interpreted languages, like Pytohn, need an interpreter, though you can just compile a C++/Go program and run it. Some languages (C# w/ .NET, Java) require a VM to run, though C++ and Go are not.

A Windows window is opened using something called the "win32" API. If you call a few functions, you can get a window to open. These APIs are non-standardised, so opening a window on different OS's will be different.

If you mean a console window, that is created by the OS when you write to stdout. Some OS's (*cough* Windows) will actually kill this window, and force you to make a manual handle to a console I/O window.

Making GUIs in low-level languages is a pain. Either use something like Java Swing, use console with something like curses, or just use standard console.

Baconman321 (1103)

@19wintersp So the compiled binary is already run through the linker and all.

What if I want to set up a web server and I have files that are served via a file server.

When I compile the binary, it doesn't add the html files, does it (basically I can run the web server anywhere and the html/css/js files will be packed into the exe)?

My assumption is no.

19wintersp (1142)

@Baconman321 If the files are in the filesystem, and are not packaged into the binary when compiled/linked, those files will not be part of the binary. You can pack them in, but again, it's a pain. I'd personally just zip the binary and all the files it needs into an archive, and distribute that.

Baconman321 (1103)

@19wintersp Oh and also the win32 API is deprecated apparently.

Still, good to know.

I'm collaborating with someone on a minecraft remake and I need to find out how to host a server via LAN.

This is probably better with chrome's chrome.socket as an extension though...

19wintersp (1142)

@Baconman321 Host a server via LAN? It's the same as hosting a normal server. If you want a C++ library, we're using yhirose's cpp-httplib HTTP server/client, and it's pretty good. I'm not sure about win32 being deprecated, where'd you read that?

19wintersp (1142)

@Baconman321 Wait, I'm confused, explain your project. Is this a browser-based thing, or what language are you using?

Baconman321 (1103)

@19wintersp LOL I actually thought of that, but then I forgot that I thought of that.

The only problem is windows API for Go, which then is in unsafe memory territory.

Eh, like I said... I'm probably going to use a chrome extension instead.

Good to know how to do stuff like that, tho.

Baconman321 (1103)

@19wintersp I just googled it.

What's the difference of hosting a normal server and a server on LAN.

With a server accessible from the internet tho, wouldn't you need to configure it to run on the router's IP?

LAN is just as simple as listening on 0.0.0.0 or something like that... yeah.

Baconman321 (1103)

@19wintersp It's browser based...
https://sortacraft.sortagames.repl.co
Anyways, I gtg so prob not going to respond for a while (just wanted to let u know so I don't leave anyone hanging)...

I think I'll just set up a server and all and host the current game instance but allow people on LAN (if the router allows it) to access it...

Going to be hard, and I may drop it, but it would be cool if I could accomplish something like that...

19wintersp (1142)

@Baconman321 If it's a game, WebRTC might be useful for you, it's client-side peer-to-peer connections in JS. My suggestion is this: keep it browser-based, and rather than hosting to LAN, one-up and host to anyone on the internet using WebRTC. I'm planning on building something which could make this easier, by the way.

Baconman321 (1103)

@19wintersp Maybe...

Web sockets are ok rn, but I never thought of that!

I'll try sometime...

19wintersp (1142)

@Baconman321 I've added it: you can now create "Raw HTML" nodes, and upload HTML documents in the Files/Project/Open section.

xxpertHacker (931)

@Baconman321 That literially makes the app 100% redundant, why use the editor and the json files, if you can just type HTML and upload HTML?

19wintersp (1142)

@xxpertHacker My thoughts exactly, though here's what Baconman said:

[the app is] defeating the main point of a typed language.

Anyway, it's a feature, admittedly one which bypasses the main point of the app, but whatever.

xxpertHacker (931)

@19wintersp But, how is HTML a typed language?
If anything, the interface is better "typed," na what am I saying, that still makes no sense.

Seems more like a footgun.

xxpertHacker (931)

@19wintersp Why JS WebRTC <-> JS WebRTC?
Native code can use RTC just as well, so if anything, it would be much faster, and not require shipping an entire JS VM, browser, and all of the unecessary stuff.

19wintersp (1142)

@xxpertHacker Yes, distributing electrical generators with every electrical appliance is the best way of doing things. We need to watch out for those who aren't connected to the grid, plus, it keeps electricity bills down.

tussiez (1676)

@Baconman321
hmm
Running "LAN" servers is pretty easy. Simply open the server on your own computer without port forwarding. Since your router's firewall doesn't have special instructions saying it shouldn't block external connections to :port, you won't find your server outside of your local network.

tussiez (1676)

@Baconman321 Repl.it already handles "port forwarding" for us, so we don't have to worry about firewalls. Otherwise, your apps using socket.io/etc would only work in their server rooms.

Baconman321 (1103)

@xxpertHacker Yes, I guess.

Still, at least now more people should find a use in using the editor!

Baconman321 (1103)

@19wintersp I still like the idea of a "visual" editor. I think it will give noobs a better experience with HTML.

If you can create the syntax highlighting though, that would be awesome as well!

Baconman321 (1103)

@tussiez I don't get why it would be without port forwarding.

Port forwarding allows other computers to communicate with each other on LAN, right?

tussiez (1676)

@Baconman321 Routers have "firewalls". This blocks all incoming connections on all ports unless you tell it to not
So starting a server without port forwarding makes it only available on the local network. When you port forward, anyone in the world can connect to the server by using your IP

Baconman321 (1103)

@tussiez Oh, ok.

I don't think we will extend it further than LAN because that defeats the purpose of public servers (that we will set up)...

tussiez (1676)

@Baconman321
Because firewalls, the same code for public servers can simply be reused as "LAN" servers (e.g open a Node.js app locally)
Minecraft works somewhat like this.

Baconman321 (1103)

@tussiez Yea.
I think we should have a chrome extension that opens up a port on LAN for other people to play sortacraft, as well as a public server website that opens rooms online for people to play.

tussiez (1676)

@Baconman321 Yeah - if we use Node.js, how would we start a server in the extension though

Baconman321 (1103)

@tussiez The extension detects when u play sortacraft and adds the ability to open up a port on LAN and allow players to join your game which is hosted on LAN.

Basically it extends the sortacraft HTML5 game, not the Node JS server.

Baconman321 (1103)

@tussiez Actually, I use that for most of my web projects on my computer!

Yes, we would use chrome.socket kind of how the chrome web server uses it.