[=] Jexplorer
Get From Marketplace | Github (COMING SOON) | Donate 80 Robux | Janilla3 Icon Pack
NOTE: This plugin requires you to turn on the UI Styling beta feature, see below for more details
NOTE 2: Your settings and styles are subject to being reset as this plugin develops, for now I’d try not relying too hard on it!
Jexplorer is a fully open sourced custom explorer plugin made with JECS, designed for upgradability, customizability and performance.
You can customize widget styles using the style editor, do JECS queries via the query components box, etc.
Random image of me using Jexplorer for my game, note that this is only how my Jexplorer looks, and yours can look different!
I recommend reading the following sections in order so you aren’t confused!
How to turn on the UI Styling beta feature
- Open the beta features widget
- Scroll down to “UI Styling”
- Check the checkbox, click “Save” and click “Restart”, now you will be able to use Jexplorer!
Things JExplorer can't do that Roblox's Explorer can
Unfortunately, because JExplorer does not have ElevatedPluginSecurity capabilities, there are certain things you won’t be able to do. All of the ones I know are in the list below:
| Detail | Description |
|---|---|
| Solved (JProperties widget aka Properties) | The properties panel and JExplorer aren’t able to communicate, which means you are unable to select properties of Instance type to an instance in Jexplorer. |
| Annoying | Jexplorer does not (atleast to my knowledge) have the ability to export Instances as .rbxmx files, which means you can’t export an Instance tree as a local plugin. It also doesn’t have the ability to publish an Instance tree as a Roblox distributed plugin |
Context Menu
The context menu is a menu that appears whenever you right click on an instance, like so:
It has various functionalities you can assign shortcuts to!
In the future, this menu will have more builtin actions to use and a menu to customize it.
Selection
Selecting instances in Jexplorer works in largely the same way as Roblox’s; you shift + click to multi-select, ctrl + click to toggle select and click to set selection to the one you just clicked only.
JSL
JSL (Jexplorer Styling Language) is the language used by the Jexplorer Style Editor to permit usage of advanced expressions such as $MyToken + rgb(20, 3, 4) + $MyOtherToken, here are a list of syntaxes:
Functions:
| Function Name, Args & Return |
|---|
rgb(r: number, g: number, b: number) -> Color3 |
hex(hexid: string) -> Color3 |
vec2(x: number, y: number) -> Vector2 |
vec3(x: number, y: number, z: number) -> Vector3 |
udim2(x_scale: number, x_offset: number, y_scale: number, y_offset: number) -> UDim2 |
udim(scale: number, offset: number) -> UDim |
min(...number) -> number |
max(...number) -> number |
abs(v: number) -> number |
floor(v: number) -> number |
ceil(v: number) -> number |
round(v: number) -> number |
clamp(x: number, min: number, max: number) -> number |
brightness(v: Color3) -> number |
Operators:
| Symbol | Operand Types | Example |
|---|---|---|
+ |
number | Color3 | Vector3 | Vector2 | UDim2 | UDim |
rgb(10, 2, 3) + rgb(1, 1, 1) |
- |
number | Color3 | Vector3 | Vector2 | UDim2 | UDim |
10 - 200 |
* |
number | Color3 | Vector3 | Vector2 |
vec2(1, 2) * 10 |
/ |
number | Color3 | Vector3 | Vector2 |
vec3(100, 2, 2) / vec3(1, 2, 3) |
$ |
identifier |
$MyToken + ($OtherToken * 2) |
. |
identifier |
rgb($Token.R * 255, 2, 10) |
? : |
condition ? truthy : falsy |
$MyToken.R > 0.5 ? 200 : 0 |
| |
any |
true | false ? 10 : 9 |
& |
any |
brightness($MyToken.R) > 0 & $OtherToken == 10 ? $BackgroundColor + rgb(10, 2, 0) : rgb(0, 0, 0) |
> |
number |
10 > 2 |
< |
number |
5 < 100 |
>= |
number |
100 >= 100 |
<= |
number |
5 <= 10 |
== |
any |
rgb(1, 10, 10) == rgb(1, 10, 10) |
~= OR != |
any |
10 != 10 |
JDF
JDF (Jexplorer Datatype Format) is a format used in Jexplorer to convert to and from strings and certain values such as expressions, userdata and other types.
Here are a list of all of them:
| Name | Format | Example |
|---|---|---|
string |
abcdefg... |
This is a string, it doesnt require any special tag indicators! |
bool |
[bool] true/false |
[bool] true |
num |
[num] n |
[num] 2025 |
Color3 (rgb) |
[rgb] r, g, b |
[rgb] 25, 255, 20 |
Color3 (hex) |
[hex] id |
[hex] 141414 |
Vector2 |
[vec2] x, y |
[vec2] 100, 20 |
Vector3 |
[vec3] x, y, z |
[vec3] 0, 1, 2 |
UDim2 |
[udim2] x_scale, x_offset, y_scale, y_offset |
[udim2] 0, 20, 0, 20 |
UDim |
[udim] scale, offset |
[udim] 1, 0 |
EnumItem |
[enum.EnumType] EnumItem |
[enum.CameraType] Custom |
JSLExpression |
[expr] expression |
[expr] $MyToken + rgb(10, 10, 10) |
Style Editor
The style editor is a widget you can access by clicking the arrow button on the top left of the plugin, and clicking “Open Style Editor”
Once you’re in the style editor, there are 2 dropdowns you can click to expand/collapse, tokens and style rules:
What are style rules?
Style rules define how different UI elements in Jexplorer should appear. They use CSS-like selectors to target specific components and properties. Each style rule consists of a selector (which elements to target) and declarations (what properties to change). You can use JSL expressions in style rules to create dynamic styling based on tokens and calculations.
For example, you might create a style rule to change the background color of selected instances, or modify the text color based on the instance type. Style rules give you fine-grained control over Jexplorer’s appearance.
How to create your own rules
You can add a custom rule by clicking the + button next to the main StyleRules dropdown
This will make a menu appear in the main widget, where you can put in your selector and priority and then create your custom style.
Once you’ve created your custom rule, you can click the “-” button to delete it.
Since the name of the header is a textbox, you can edit it to customize the name of your rules!
Selector Macros
Selector macros are special values you can put into the Selector textbox while creating a custom style, here are all of them:
| Macro Name, Arguments & Result | Description & Example Usage |
|---|---|
@icon(name, class) -> IconSelector |
This macro will give you a selector for specific instance icons in the explorer, for example @icon(nil, Part) will give you a selector that only applies to instance frames that are linked to Parts, @icon(Configuration, Folder) will give you a selector that only applies to icons linked to Folders which are named Configuration, etc. This macro will also prefill your custom rule with Image, ImageRectOffset and ImageRectSize fields |
@prop(propertyName, targetValue) -> TaggedPropertySelector |
This macro will give you a selector for all InstanceFrames which are assigned to an instance with a tagged property of target value. A tagged property is just a property that is assigned to the instance frame an Instance entity is assigned to for identification purposes, currently these are only Name, Enabled and RunContext. |
Add your own styled properties to rules
You can add styled properties by clicking the “+” button in the header of your new custom style
Once you’ve clicked it, a menu should appear in the explorer widget, prompting you to create a new style property with a name and a default value.
Property value fields are in JDF, so make sure you tag your values correctly!
Upon clicking Create, a new property field will appear under your custom style. You can click “-” to delete it, and you can right click on the value field textbox to view the “Reset to Default” action which you can use to, well, reset the value to the default value.
What are tokens?
Tokens are reusable style variables that store values like colors, sizes, or other properties. They act as a centralized way to manage your styling system - when you change a token’s value, all style rules that reference that token will automatically update.
Tokens are referenced in JSL expressions using the $ symbol (e.g., $MyBackgroundColor). This makes it easy to maintain consistent theming across your entire Jexplorer interface. You can create tokens for common values like primary colors, spacing units, or any other styling properties you want to reuse throughout your custom theme.
The token system supports all JDF data types, so you can store colors, numbers, vectors, and more as reusable tokens in your styling setup.
JQL & Queries
JQL (Jexplorer Query Language) is the language used to structure queries in the “Query Components” search bar (aka the component filter) at the top of the plugin widget
You can use it to construct queries to find the instances you want.
The following are the syntaxes present within JQL:
Operators:
| Symbol | Name | Usage |
|---|---|---|
propName = desiredValue |
Pair Operator | Represents a relation between a property and a specific value. |
desiredComponent |
Component Operator | Queries for all instances with this specific component. Can be used to query for instances with specific tags, like MyTag1 & MyTag2 |
< |
Parent Operator | This is an unary operator you can prefix before a component/pair expression, like <<pair(Name, GrandParent) to find all instances whose .Parent.Parent.Names are GrandParent. |
> |
First Child Operator | This is an unary operator you can prefix before a component/pair expression like >>>(Name = Descendant) which will find all instances who have atleast 1 descendant named Descendant 3 layers down. |
& |
And Operator | This is used to only show instances that meet both conditions of the operator, like <(Name = Parent) & Size to find all instances whos .Parent.Names are Parent, and have a Size property/tag, doesnt matter the value. |
| |
Or Operator | This is used to only show instances that meet either one of the conditions of the operator, like `(Name = Cool) |
How to create a custom script folder icon using the style editor
In this section I’ll assume you already understand how the style editor works!
- Create a new StyleRule with
@icon(Scripts, Folder)as the selector and a priority above 0 so it overrides the default icon
- Scroll down to the bottom of all StyleRules until you find one named CustomStyle, and rename it to ScriptsFolder by left clicking on the name.
- Left click the “Import Image” button under the “Image” property box (It’s the little thing that looks like a folder and is at the far right of the value box that says “Enter value…”)
- Once you’ve imported your image, boom, now all Folders named Scripts will have your very own custom icon!
Coming in the future
Sorted by priority:
- Instance Visibility Editor
- Context menu editor
- Source control widget
- Ability to view Jexplorer queried instances as a flat list, omitting their ancestors
Known Issues
- Since stylesheets can only affect non-modified properties, and the Jexplorer ui itself still has modified properties, this means you currently aren’t able to customize every single thing via the style editor. Once I move every property to be a style this will no longer be an issue :>
Get plugin source by running this in your command bar:
game:GetObjects("rbxassetid://108870283294163")[1].Parent = workspace
Because this plugin is in beta, any constructive feedback is appreciated on how I can improve the plugin further 
Please also report any issues you find and I’ll try fixing it!
- Yes
- Haven’t tried
- No
(output window)