Vigets - Convert your Roblox Guis into Vide components! - FREE

Resources Community Resources
, , ,
1

:hammer: Roblox Plugin | :floppy_disk: GitHub Repo

I’ve been working on a plugin called Vigets to help bridge the gap between traditional Roblox UI design and component-based UI frameworks. If you like building interfaces visually using standard Roblox instances (ScreenGui, frames, buttons, etc.) but want clean, reactive code using Vide, this plugin is for you - especially for those who arent willing to pay a price! :sad:

Vide (v0.4.0) Package Download: Vide.rbxm (24.4 KB)

ℹ️ About

What is Vigets?

Vigets takes any selected UI hierarchy in your workspace or PlayerGui and instantly serializes it into a clean, readable Vide ModuleScript. It also automatically handles property mapping (including complex types like UDim2, Color3, Enum, NumberSequence, and Font).

Key Features

  • Full Property & Children Serialization: Converts your entire UI layout and its properties into native create syntax.
  • Smart Studio Preview Mode: For ScreenGui roots, Vidgets intelligently wraps elements so you can preview your UI directly inside Studio without needing a ScreenGui wrapper cluttering things, while still allowing full deserialization back into instances.
  • Dependency Auto-Discovery: Automatically finds and hooks up your Vide package whether it’s located in Packages, ReplicatedStorage, or deeper hierarchies.
  • Storybook Integration: Instantly generate Storybook-compatible story files (.story) for your components with a single click.
  • And several other more features in upcoming updates!
📦 Output (Example)

Example Output

Here is a quick look at what a generated Vide module looks like:

--!nolint
-- MyButtonUI
local RunService = game:GetService("RunService")

--> Vide API
local Vide = require(game.ReplicatedStorage.Packages.Vide)
local create = Vide.create

local isPreview = RunService:IsStudio() and not RunService:IsRunning()

return function(props: {any}?)
    local elements = {
        create "TextButton" {
            Name = "SubmitButton",
            Size = UDim2.new(0, 200, 0, 50),
            BackgroundColor3 = Color3.new(0.1, 0.6, 1),
            Text = "Click Me",
        }
    }

    if isPreview and not (props and props.__vigetOverride) then
        return elements
    end

    return create "ScreenGui" {
        ResetOnSpawn = false,
        elements
    end
end

Why is it dynamic?

→ ScreenGui’s are not directly viewable in Stories.

Feedback & Contributions

I’d love to hear what you all think! Let me know if you run into any issues with specific UI properties or edge cases, or if you have suggestions for other features you’d like to see added.

The GitHub page is where you can submit Issues or Suggest Changes

Happy scripting!

7 Likes