Usage Tutorial
How to use HTML to Roblox.
When you have HTML to Roblox placed on your game, put it into a place where the client can access it such as ReplicatedStorage. For this tutorial, we'll be using ReplicatedStorage.
Next create a localscript inside of StarterGui. We'll name it Builder from now on. It will act as our Gui creator. Now how do we get the script going? Well all you have to do is find your HTML and place it somewhere with it enclosed as a string.
Html example (modulescript named Html inside of Builder):
return {
[[
<body>
<h1>Hello World!</h1>
<p class="red-text">This paragraph is red and bigger.</p>
<p>This paragraph uses default styles.</p>
<button onclick="console.log('Button clicked!')">Click me</button>
</body>
]]
}You have to keep your HTML starting with a body delimiter, or an html delimiter. Otherwise HTML to Roblox won't render it. This might change in the future.
Now lets go back to our Builder localscript. We need that Html module.
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Html = require(script:WaitForChild("Html"))Now how can we get the Html rendered? Well first we need to require these modules. For CSS support (we'll get into that later), and Html handling/rendering.
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Html = require(script:WaitForChild("Html"))
local CssParser = require(ReplicatedStorage.HTMLToRoblox:WaitForChild("CssParser"))
local HtmlParser = require(ReplicatedStorage.HTMLToRoblox:WaitForChild("HtmlParser"))
local GuiBuilder = require(ReplicatedStorage.HTMLToRoblox:WaitForChild("GuiBuilder"))Then we can get that html rendered. Parse the html, put it into a ScreenGui (or create one), then have GuiBuilder put the rendered html in that screengui.
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Html = require(script:WaitForChild("Html"))
local CssParser = require(ReplicatedStorage.HTMLToRoblox:WaitForChild("CssParser"))
local HtmlParser = require(ReplicatedStorage.HTMLToRoblox:WaitForChild("HtmlParser"))
local GuiBuilder = require(ReplicatedStorage.HTMLToRoblox:WaitForChild("GuiBuilder"))
local Players = game:GetService("Players")
local parsed = HtmlParser.parse(Html) -- Parse the html from the Html variable.
local playerGui = Players.LocalPlayer:WaitForChild("PlayerGui")
local screenGui = Instance.new("ScreenGui")
screenGui.Name = "HTMLRender"
screenGui.ResetOnSpawn = false
screenGui.Parent = playerGui
GuiBuilder.build(screenGui, parsed) -- Create the html rendering to the screenGui.Now you should see the html on your screen when you playtest the game. If you want to view the API Reference so you can learn more about this module, go ahead!
Last updated