Hyper: Is it possible to style the BEAM cursor with CSS

[rfgamaral]

• [x] I am on the latest Hyper.app version
• [x] I have searched the issues of this repo and believe that this is not a duplicate

• OS version and name: Windows 10
• Hyper.app version: 2.0.0 (stable)
• The issue is reproducible in vanilla Hyper.app: Is vanilla.

Issue

I would like for my BEAM cursor to be 2px wide (instead of the default 1px) and with some left-padding pixels so that the cursor is not glued to the text. I've tried to look into the source code to understand how to customize this but I'm not being able to. Maybe it's not possible in the latest version because of the upgrade rendering engine?

I tried to customize things like .cursor-node and .terminal-cursor and both in css and termCSS in hyper.js config but without success. If this is possible, can someone please clarify the proper syntax to achieve what I'm after?

[albinekb]

tldr: no

Hyper 2.0 uses xterm 3.x to render the terminal, which is using canvas, that's why the CSS is not doing anything to change the cursor for you, I think we should check what's possible to change with current xterm API and see if we can expose that for plugins/user config to tweak it.

If there's no API for changing the cursor we will need to open an issue over at xterm to request that to be added.

[rfgamaral]

Makes sense :)

It would be great if this was customizable. I'm not sure if everyone likes blinking beam cursors but I do, and would love to have a smooth blinking cursor (opacity animation like VS Code).

Let me know if I can help in any way :)

[rfgamaral]

I was about to create another issue but maybe this is somewhat related so I'll leave it here...

The spacing between text characters is to short for my taste. But there's no way to apply styles to whatever is rendered in the canvas so I can't just use letter-spacing unfortunately.

I don't even know if it's possible because I'm not very familiar with <canvas> capabilities but it would be nice if, somehow, we could just use CSS to personalize anything inside the canvas :)

[chabou]

There is a workaround for the cursor: https://github.com/zeit/hyper/blob/canary/PLUGINS.md#cursor

You can make a plugin that makes xterm's cursor transparent, adds a layer/canvas over xterm (like hyperpower) and draws cursor by itself using Hyper Cursor API.

[rfgamaral]

Nice, but like you said, it's a workaround.

I think it would be better (if at all possible, of course) to style the terminal contents with CSS. It would be much easier (than writing a plugin) and more flexible to customize IMO.

[albinekb]

We can't do that with xterm canvas API, it's so different from CSS unfortunately :/ We are also pushing to move more stuff to plugins to keep the codebase in here more manageable, if we accept all of these small tweaks and put them in the Hyper core, we will get so many small features that are used by a small percentage of users but still need to maintain those all when doing updates, if we instead put it in a plugin and keep the core to only core stuff, we will have less features to maintain and thus we can develop Hyper and make it even greater, while still having custom functionality provided by plugins.

We could make a plugin hyper-custom-cursor that allows styling the cursor with CSS, and overlaying that on-top of the terminal maybe?

[rfgamaral]

I understand your reasoning and it makes complete sense and if there's no other way around it without messing Hyper core too much, I'm all for it.

It's just that hiding the default xterm cursor and creating our own feels a bit hacky. But if there's no performance hit by doing that, I guess it's fine :)

[albinekb]

I think it's possible to do it as an Xterm addon, and then put that inside a hyper plugin, but it will be more work. See https://github.com/zeit/hyper/issues/2903 for the issue about adding xterm addons via a hyper plugin 👍

I think the easiest way is to do it like Chabou said with the hyper cursor API and overlaying it, maybe it will be fast enough 😄 I don't have time to test it right now. Hyperpower uses this approach and it feels really snappy, see https://github.com/zeit/hyperpower for the code

Or the third option is to open an issue about styling the cursor in xterm and then using that API in hyper, but I think that is going to take time and a lot of effort to get trough, and for such a small thing as the cursor I don't think it's worth the effort 🙈

[rfgamaral]

Yeah, it's a little issue, I know... :)

[slammayjammay]

@rfgamaral it's possible to set some CSS on the canvas that renders the cursor. If you wanted to add padding-left to the cursor this might work:

.xterm-cursor-layer {
    left: 2px;
}

You can also set the opacity on the entire canvas to get that smooth cursor animation you mentioned. I made a plugin (beware: incredibly hacky) that tries this, though I'm not too familiar with how it looks in VS Code. :)

[rfgamaral]

@slammayjammay Thanks for that CSS snippet. Minus the animation, it's exactly what I wanted (I given up on the 2px wide cursor, I think it looks better with just 1px 😄.

As for your plugin, I appreciate the effort but if fells like a lot of code for a simple animation, or is it doing something else? Yes, I know you said it was incredibly hacky 😆

You can download VS Code and configure it with these settings to see what I meant:

"editor.cursorBlinking": "smooth",
"editor.cursorStyle": "line-thin",

[slammayjammay]

it feels like a lot of code for a simple animation

yeah definitely...but it can't be a simple CSS keyframes solution because the cursor needs to remain visible as you type so that's what all the JS is about.

[rfgamaral]

because the cursor needs to remain visible as you type

Perhaps we could add a class like typing to xterm-cursor-layer when the user is typing and remove the class when the user is not typing. Then apply the CSS only when that class is there.

Not sure if this is possible, just throwing ideas out there...

[slammayjammay]

Yup that's effectively what the plugin does.

[rfgamaral]

Maybe it would make sense to get that functionality into Hyper core? The plugin could be simpler...

[rfgamaral]

I'm closing this issue because given the issue title, it's effectively answered. Thanks everyone for your contributions.