HTML to Roblox (Html Module Rendering Utility)

What’s “HTML to Roblox”?


HTML to Roblox is an up and coming module that allows you to place HTML code into the module, and have it convert the contents of that HTML into a Roblox Gui.

( new ) Where can I learn more, and install this?

Documentation’s over here at: Installation | HTML to Roblox
Go head to this link if you want to install this module.

If you want the source code, it’s also here on Github: GitHub - Denied-ID/HTMLToRoblox: HTML to Roblox is a Roblox module that allows you to place HTML code into the module, and have it convert the contents of that HTML into a Roblox Gui.

Why do I need this?


Well if you’re planning to recreate a website (I know a lot of games like LegacyVerse do this), or maybe you’re just trying to find something easy to setup and use, then this might be useful for you. All you have to do is copy the website’s HTML code (if you have permission to), and the CSS if needed, and then you can see it on your Gui.

Demo

HTML:

<div style="background-color:#eeeeee;">
  <p style="color:#333333; font-size:16;">Hello, Roblox!</p>
  <div>
	<p style="color:#000000; font-size:12;">This is a demo of the HTML to Roblox module.</p>
  </div>
</div>

Result:

What about the other solutions out there?


I have noticed this question a bit in some older forum posts attempting to do the same thing I am, and I have seen “Roblox-TS” quite a bit. That might be useful for some people, but that’s appears to be a little hard to set up, and not as beginner friendly as this one aims to be. Plus it uses something called TypeScript, which is something that isn’t too easy for someone to learn right away. That’s why I made this module specifically for HTML because it’s easiest for you.

Does this include things like JavaScript support?


Absolutely. In fact it also supports other supported features on Html buttons like onclick="console.log('Button pressed!'). And that’s not all. You can even take a <script> delimiter, and add an atribute called type (<script type="">). Now what’s cool about this type attribute is you can change the script from JS to LuaU, and it will work the same except it’s a different language. Now the JS variant is literally just converted from its JS counterpart, to a Roblox supported variant so it can work in the Roblox engine.

Conclusion


I hope to get this out potentially soon so you all can test this out for yourselves and maybe run your own experiments on it like I am. I’m just making sure it’s stable and accurate before anything else. Thanks for taking a look. If you have any questions, feel free to let me know.

41 Likes

Which use cases WON’T this work for?

2 Likes

I’m not exactly sure on that lol. but we are trying to apply every single CSS default style that would be applied by the browser by default, native JS support (and LuaU support) (we’ll provide documentation). I’m planning external css from other websites to work too (if it’s enabled in your game settings), and much more. It’s designed to kind of be copy and paste. If you want to know what things you’re concerned about, you can let me know.

1 Like

Status Update


Side-by-side comparison:

HTML:‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ Roblox (HTML to Roblox):

The only thing that has been modified in the Roblox version is the BackgroundTransparency of the container frame. Everything else is completely generated from HTML to Roblox! Here’s the HTML used:

<body style="padding:16px">
  <h1 style="color:#2c3e50">HTML Demo</h1>
  <p>This is a completely unstyled sentence.</p>
  <p>This paragraph uses <span style="color:#e74c3c;font-weight:bold">inline CSS</span> and default UA margins.</p>

  <h2>List example</h2>
  <ul>
    <li>First item</li>
    <li>Second item</li>
  </ul>

  <h2>Interactive</h2>
  <button id="myBtn" onclick="print('button click')">Click me</button>
  <br/>
  <a href="#" onclick="print('link click')">Just a link</a>
</body>

I’d say it’s almost a one to one copy! Now even though the button didn’t remain the exact same styling, or the font (which I can’t even get anyway), it still works together pretty well! What do you all think?

6 Likes

I’m really interested into this module, so if possible, could you @ me once you release it?


As for the button, you can definitely 1:1 it:


image
(Firefox)

(Chrome)
button.rbxm (3.9 KB)


As for the font, I recommend using Montserrat.

Yeah I kinda rushed the elements lol. I will look into using Montserrat, and these styles. And yes I can ping you from the DevForum when this does release if I remember lol.
EDIT: I have created a new almost identical button style using your previously provided rbxm. Much appreciated!


image

2 Likes

Thanks, maybe I didn’t clarify my question too much- How would fetching something externally work? If I copy code from a side that uses Adobe Typekit, for example, I’m guessing it won’t be able to grab the fonts and render them in-engine?

Oh yeah fonts probably wont be able to work. I might add in something to pick the closest font to the original font, but I don’t know about that because of how many fonts exist. I might think of a solution to add the fonts via Roblox later. BUT something like getting a website’s CSS website code might work with this. All it needs is a string of text, either CSS or HTML, and then it should render (css support’s only in the html delimiters right now but we’re trying to get that going).

Nice, good to know. And, not to ask for the moon here, but-
Image support?
It’d be great to be able to embed an update blog ingame without leaving (but I’d imagine you’d have to do some bypasses as has been the case with the previous 100000 renderer attempts).
Could, by some magic, decal AssetIDs be used in place of image embeds and still passed to the finished GUI?

I’m not sure if images might be supported lol (https:// ones I’m referring to), but I’ll try. If not I can redirect those src=“” locations to accept “rbxassetid:// urls” or maybe actual file paths (depending on where the script is located). We’ll see.

It’d be a good test, as all the previous attempts I’ve head of only work in localhost

I’m probably not going to support http:// images now just to mitigate the risk of other players getting banned from using this in their games, as well as preventing this from being taken down on the first day lol. I would try, but I wont be able to moderate every image.

You can find more info here: Editable Images - Image URL Loading

2 Likes

I’m working on the CSS support right now, just running into some problems from the default CSS, and still trying to add in more CSS value support. Wish me luck!

@SomeFedoraGuy

Alpha Testing Release!

Documentation’s over here at: Installation | HTML to Roblox
Go head to this link if you want to install this module.

If you want the source code, it’s also here on Github: GitHub - Denied-ID/HTMLToRoblox: HTML to Roblox is a Roblox module that allows you to place HTML code into the module, and have it convert the contents of that HTML into a Roblox Gui.

Sorry I don’t have too much to say lol. But if anyone wants to contribute to the code, or fix errors, please do! Everything helps.

1 Like

Trying to use the module on the returned HTML doc for, say, example.com leads into the following error:


Being this:

This is the code I’m using:

local HttpService = game:GetService("HttpService")
local HTML = require(workspace.HTMLToRoblox.HtmlParser)
local UI = require(workspace.HTMLToRoblox.GuiBuilder)
UI.build(script.Parent,HTML.parse(HttpService:GetAsync("https://example.com")))

Yeah I think the website might be too intensive to handle. Maybe a wait function might do it? I’ll look into it soon, or maybe someone can fix it through GitHub lol.

I’m trying to connect the GitHub repository through Rojo so I can adjust the code, and you guys can help along as well as we speak. Before I make any more changes, I’m just doing this first for simplicity.

GitHub and Documentation updates!


GitHub is now using the Rojo source which you can now use to build HTML to Roblox directly from your system. You can find that guide here on the documentation. This would be useful if you’re trying to test out fixes for this module and get it published to GitHub through a Pull Request.

@SomeFedoraGuy So I’m attempting to do some troubleshooting and things on the loop (which appears to be fixed) and the way you’re grabbing the website. Where’s the script that you’re trying to run this? Because we can’t put it on the player’s Gui if it’s a serverscript in ServerScriptService and all that, so I’m just curious because HttpService doesn’t work on the client.

Huge Status Update


Thanks to the possibilities of this module, we’re now able to render websites in the latest developer preview (not yet published to GitHub). Thanks to @SomeFedoraGuy for actually sparking up the idea of HtmlService websites. I want to see what you can all make with this! Maybe a full on Google Chrome browser in Roblox? Lets see in the future. We’re still trying to finalize things so websites can actually render moderately well.

https://theoldnet.com :