Roblox studio in the browser | Took 2+ years to make, please give feedback!

once, it’s stable, it will be released.

im doing this for a reason just so the community can modify it
for example, theme support

there are a lot of apis such as the one i am working on

and im trying to reverse engineer team-create(harder then it seems)
for team-create, roblox uses RakNet, the same protocol for connecting to their client.

it’s very propieritery so it’s taking a while

1 Like

Yeah, I know some stuff about the innerworkings of Roblox Studio and the client itself. RakNet is used for client-server communication.
Implementing team create could be somewhat hard.

ye, it’s taking a long time,
hardest part is cracking roblox’s authentication to team-create

1 Like

For sure it is, I can imagine.

Just finished reverse engineering it, it’s back up to working now.
I originally thought the endpoint only worked on binary but it works on xml too!

3 Likes

is this open sourced? i wnna contribute to the css styles to make it modren (cuz I’m good at it)

1 Like

Not yet, it is not stable and im still adding features

2 Likes

That’s great! What’s the new endpoint for publishing places (if it isn’t already the open cloud one)?

1 Like

PATCH request to https://apis.roblox.com/assets/user-auth/v1/assets/ + assetId

It is the same api roblox studio uses, it’s body involves a multipart-form upload, it is a bit complex and it involves buffers, i can explain if i need to

2 Likes

yes please! If you don’t mind explaining

1 Like

Alright!

So first you need an X-CSRF-TOKEN, you can just make a request with your .ROBLOSECUIRTY to PATCH https://apis.roblox.com/assets/user-auth/v1/assets/ + rootPlaceId

So after that you need to assemble a body to upload data to the roblox servers

Here is the code for this:

var buf = Buffer.from(xmlCode).toString('hex')
var isPublish = (req.query.publish == 'true') ? (Buffer.from('true').toString('hex')) : Buffer.from('false').toString('hex')
var bodySend = Buffer.from('2d2d2d2d2d2d2d2d2d5075626c6973685365727669636543726561746541737365740d0a436f6e74656e742d446973706f736974696f6e3a20666f726d2d646174613b206e616d653d2272657175657374220d0a0d0a7b22617373657454797065223a22506c616365222c2261737365744964223a' + Buffer.from(req.body.split('!!')[0]).toString('hex') + '2c227075626c6973686564223a' + isTrue + '2c226372656174696f6e436f6e74657874223a7b7d7d0d0a2d2d2d2d2d2d2d2d2d5075626c6973685365727669636543726561746541737365740d0a436f6e74656e742d446973706f736974696f6e3a20666f726d2d646174613b206e616d653d2266696c65436f6e74656e74223b2066696c656e616d653d22636f6e74656e74546f55706c6f6164220d0a436f6e74656e742d547970653a206170706c69636174696f6e2f786d6c0d0a0d0a' + buf +'0d0a2d2d2d2d2d2d2d2d2d5075626c6973685365727669636543726561746541737365742d2d0d0a', 'hex')

So first, what
var buf = Buffer.from(xmlCode).toString('hex')
does is that it converts the xml file to hex code so i can integrate it with the other hex code

Then, (req.query.publish == 'true') ? (Buffer.from('true').toString('hex')) means that it converts if you want to save it to the place or publish it in hex.

After this what

var bodySend = Buffer.from('2d2d2d2d2d2d2d2d2d5075626c6973685365727669636543726561746541737365740d0a436f6e74656e742d446973706f736974696f6e3a20666f726d2d646174613b206e616d653d2272657175657374220d0a0d0a7b22617373657454797065223a22506c616365222c2261737365744964223a' + Buffer.from(req.body.split('!!')[0]).toString('hex') + '2c227075626c6973686564223a' + isTrue + '2c226372656174696f6e436f6e74657874223a7b7d7d0d0a2d2d2d2d2d2d2d2d2d5075626c6973685365727669636543726561746541737365740d0a436f6e74656e742d446973706f736974696f6e3a20666f726d2d646174613b206e616d653d2266696c65436f6e74656e74223b2066696c656e616d653d22636f6e74656e74546f55706c6f6164220d0a436f6e74656e742d547970653a206170706c69636174696f6e2f786d6c0d0a0d0a' + buf +'0d0a2d2d2d2d2d2d2d2d2d5075626c6973685365727669636543726561746541737365742d2d0d0a', 'hex')

means is that, this large hex buffer is literaly just this

---------PublishServiceCreateAsset
Content-Disposition: form-data; name="request"

{"assetType":"Place","assetId": (placeId),"published":true,"creationContext":{}}
---------PublishServiceCreateAsset
Content-Disposition: form-data; name="fileContent"; filename="contentToUpload"
Content-Type: application/octet-stream

but as a buffer, the reason for all of this is roblox servers do not like it as text, it wants it as bytes, so use a buffer I convert the whole body to bytes.

Then, I just send then with a PATCH request and, with the headers of the cookie and then roblox place and universe id with these headers:

'Roblox-Place-Id': placeId,
'Roblox-Universe-Id': gameId

I get it that you may not understand it because roblox makes it more complicated then it needs to but idk

2 Likes

Thank you for this it it’s very helpful!

what does req represent in the code?

it’s the request in node js
req.query.publish just means wether or not it’s published

req.body.split(‘!!’)[0] is just the place id

1 Like

Wow, even for what it is now, I’m impressed by it.

I mean… if you really think about it, Roblox games are really just .rbxl or .rbxmx files?
You can save Roblox games in a human-readable file format that roughly looks like html or json.

If you can write a program or app that can save, edit and modify Roblox place files you technically can make your own editor or a highly customized unofficial version of studio.

I never really thought about that but that’s actually pretty heckin cool.

1 Like

That’s CRAZY. It is a very good solution for any outage (Crowdstrike, CVE-2024-38063) or any travel-related issues. It is very innovative. The UI itself looks mid, but that’s fixable! I love the project, and 2+ years is pure dedication :clap:

that post was a few months old but I fixed the ui recently as you can see here

1 Like

but also in the one you can publish games

1 Like

Now it’s a chef’s kiss! Good work

I agree, witnessing things like this being made is really cool!

1 Like

Hey I’m curious, what sorts of things do you use to render graphics?

You might wanna look into Babylon.js.
It’s a JavaScript 3D graphics engine that can render pretty neat 3D graphics in the browser, it supports PBR and raytracing even I believe.

If you can use that and fine-tune lights and shadows to match Roblox then things such as editing light sources and whatnot also become a possibility.

I’ve messed around with JavaScript before and Babylon.js makes rendering graphics fairly simple, you can render some static meshes with shadows and lighting with just a few lines of code and it supports custom shaders so you can recreate any post process or style that Roblox’ engine has in it.