[Feature] More configuration for the monaco editor

Feature Description

Please clearly describe the feature you want:
Currently, the in-browser editor scrolls by too little to my taste, and the font-size is too large. I know i can ctrl+scroll to adjust the font size, but it's too coarse of an adjustment.

Please implement the equivalent of vscode's editor.mouseWheelScrollSensitivity
- description: A multiplier to be used on the deltaX and deltaY of mouse wheel scroll events.
Please implement the equivalent of vscode's editor.fontSize
- description: Controls the font size in pixels.
Please implement the equivalent of vscode's editor.smoothScrolling
- description: Controls whether the editor will scroll using an animation.

Use Case

Better in-browser editor experience

Additional Information

Thank you for your work on scriptcat! I gave it a third chance today after your comment on violentmonkey's thread and it's alright.
Most importantly, it imports all my violentmonkey scripts and it runs them as I'd expect.

We definitely need to re-work the UI/UX design... I think the editor configuration is part of it.

At this moment, you can use the same approach as Violentmonkey - drag the local file to ScriptCat and click "Watch Local Change"

or consider to install the scriptcat-vscode in VS Code

thanks for the info. i had google-translated the chinese scriptcat-vscode page, but i don't want a whole extension just for this. the drag & drop + watch changes is a good ux, thanks.

@cyfung1031

@cyfung1031 are you guys using a particular ui framework, or plain js/ts with stuff like querySelector etc? also, are you using a styling framework like tailwind or just plain css?

If you'd be interested, I can try taking a look at a ui cleanup pass - it'd mostly include stuff like polishing the ui in terms of paddings, border radius, borders, maybe slight color tweaks. Would you be interested in that kind of PR? I'd add screenshots and we can iterate on it.

@cyfung1031 are you guys using a particular ui framework, or plain js/ts with stuff like querySelector etc? also, are you using a styling framework like tailwind or just plain css?

If you'd be interested, I can try taking a look at a ui cleanup pass - it'd mostly include stuff like polishing the ui in terms of paddings, border radius, borders, maybe slight color tweaks. Would you be interested in that kind of PR? I'd add screenshots and we can iterate on it.

The UI framework is React 16 + Arco Design.
https://arco.design/react/en-US/docs/start

We also use tailwindcss (unocss) in this repo.

The UI framework itself is not that good... It seems like CodFrm is doing UI re-design...

Yes, feel free to submit PR for the UI things.

This is the Pencil design draft I created, but I’ve been busy with other things recently and haven’t worked on it for quite a while.I hope I’ll have time to work on it next week; once the design direction is settled, it should be completed quickly with the help of AI.

scriptcat.pen.zip

for monaco editor config, we need the UI for the config setting.
Then next is how to do proper config upgrade... I want to let users to upgrade their setting if default setting upgraded... this involves many considerations etc. So I have not touched this area yet.

Also see [FEATURE] Settings for word wrap? (自动换行) #941

This is the Pencil design draft I created, but I’ve been busy with other things recently and haven’t worked on it for quite a while.I hope I’ll have time to work on it next week; once the design direction is settled, it should be completed quickly with the help of AI.

Can you push the latest code into one of the branch ? like dev/ui etc.

For contributors, we are welcome the use of AI helping. You just need to ensure that you have tested manually.

https://github.com/scriptscat/scriptcat/commits/develop/new-ui

I think the main issue is deciding on the UI design direction. Once the direction is settled, and if there’s a design draft, it can be completed very quickly. That’s actually the part I’m struggling with: whether this design is good enough. I’m even thinking about using claude-fable-5 to redesign another version from scratch.

@CodFrm

@CodFrm i see that you already are working on the design and the implementation of the new UI; great!
I'll leave you to it for now but if there's something I could help with, let me know.

I don't think using Claude, even Fable 5, to design the UI is a good idea; it'll look very vibecoded/sloppy imo.
I think that the new design is a big improvement! I'd say it's good enough :)
Good luck!

@KraXen72

@KraXen72 you can test the new ui by download this build.

https://github.com/scriptscat/scriptcat/actions/runs/27757800773

i will try it later. thank you!

@cyfung1031

@cyfung1031 @CodFrm
I have tried it. Very nice improvement! a couple of notes:

I wish I could edit the script storage values in a normal "big" monaco editor. I often store long, serialized json, so it'd be nicer to edit in monaco.

There is some leftover chinese text:

I would suggest more spacing here:

When I don't have a model selected in the AI chat, this should be disabled imo, otherwise it's just empty:

When scrolling to the bottom of the settings (or back up), the auto-updating category in the sidebar doesn't go fully down/up (I guess because the one that's selected is still on screen). Not really an issue, you can leave this like it is, just wanted to point it out just in case.

Overall, I really like the new ui!! It's a huge improvement, looks super clean & is fast. Not sure what the AI agent is, but it wasn't too annoying, no pop-ups etc.

Also, this issue is about the monaco editor configuration, so i'm still leaving it open for now.

✨ add editor preferences settings for #1495

@KraXen72

@KraXen72

Thanks for testing the new UI and for the detailed feedback!

The issues you mentioned above should all be handled now:

the storage value editor has been improved so larger values are easier to edit;
the leftover Chinese text has been fixed;
the spacing issue has been adjusted;
the AI chat/model empty state has been handled;
the settings sidebar active section behavior has also been improved.

For the original Monaco editor configuration request, the related options have also been added/handled: font size, mouse wheel scroll sensitivity, and smooth scrolling.

About the AI Agent: it is an experimental feature intended to help with script editing and script-related tasks. It is still being developed and optimized, and has not been officially released yet.

Thanks again for the careful feedback. It helped a lot.

@CodFrm

Thank you very much @CodFrm @cyfung1031

I will close the issue, and if it appears again, i'll re-open.

I'm looking forward to the new release!

@KraXen72

@KraXen72 latest CI build for testing: https://github.com/scriptscat/scriptcat/actions/runs/28239941534

The release of new UI (1.5 beta?) in Chrome Store takes time, but you can try it first.

latest 1.4.0: https://nightly.link/scriptscat/scriptcat/workflows/build.yaml/main/production-artifacts.zip
latest develop/new-ui: https://nightly.link/scriptscat/scriptcat/workflows/build.yaml/develop%2Fnew-ui/production-artifacts.zip

♻️ 新 UI 重写:shadcn/ui + Tailwind v4 + React 19 全面重构表现层 (#1514)

@cyfung1031

Finally landed! Thank you! It's awesome! @cyfung1031 @CodFrm :DDD

Navigation Menu

Repository navigation

[Feature] More configuration for the `monaco` editor #1495

Feature Description

Use Case

Additional Information

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Feature] More configuration for the monaco editor #1495

Description

Feature Description

Use Case

Additional Information

Activity

cyfung1031 commented on Jun 10, 2026

KraXen72 commented on Jun 10, 2026

KraXen72 commented on Jun 10, 2026

cyfung1031 commented on Jun 10, 2026

CodFrm commented on Jun 10, 2026

cyfung1031 commented on Jun 10, 2026

cyfung1031 commented on Jun 10, 2026

CodFrm commented on Jun 10, 2026

KraXen72 commented on Jun 10, 2026

cyfung1031 commented on Jun 18, 2026

KraXen72 commented on Jun 18, 2026

KraXen72 commented on Jun 18, 2026

KraXen72 commented on Jun 18, 2026

CodFrm commented on Jun 26, 2026

KraXen72 commented on Jun 26, 2026

cyfung1031 commented on Jun 26, 2026

KraXen72 commented on Oct 25, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

[Feature] More configuration for the `monaco` editor #1495