How to do text links in a settings panel?

[dannytaurus]

How do I go about making a settings panel like this?

I know I can use buttons inside a panel for the settings toggles, but I don't know how to do the links.

[Oli Ullmann]

@dannytaurus
For the look use LAF.
For the functionality use Engine.openWebsite(String url)

[dannytaurus]

@Oli-Ullmann Thanks, openWebsite is what I need.

Still not sure how to make the words into links though. Should I put invisible buttons over them?

[dannytaurus]

drawMarkdownText() looks like a good candidate.

https://docs.hise.dev/scripting/scripting-api/graphics/index.html#drawmarkdowntext
https://docs.hise.dev/scripting/scripting-api/markdownrenderer/index.html

For anyone who's used it, is this still the current way to do it (from the docs)?

const var Panel1 = Content.getComponent("Panel1");

const var markd = Content.createMarkdownRenderer();
markd.setTextBounds(Panel1.getLocalBounds(0));

markd.setText("
## Heading
Explain explain explain
");

Panel1.setPaintRoutine(function(g)
{	
	g.drawMarkdownText(markd);
});

[David Healey]

@dannytaurus I couldn't get the markdown to behave properly, but it's been a while since I tried it. What I've done in the past is just use buttons. However I'm working on something now where I'll probably need text links so I'll explore the markdown idea again.

[dannytaurus]

@David-Healey The basics seem to work fairly well, although the links aren't clickable.

I wonder if that's just in HISE and maybe they work in the compiled plugin?

The Markdown docs don't say that any other link handling is required.

I'll have to LAF the font and the colours, and not sure if I can do the dotted underlines. CSS text-decoration isn't mentioned in the CSS Reference, nor is the a selector.

Might actually be easier to use a small web view for the links section.

Content.makeFrontInterface(600, 600);

const var Panel1 = Content.getComponent("Panel1");

const var markd = Content.createMarkdownRenderer();
markd.setTextBounds(Panel1.getLocalBounds(0));

markd.setText("
Sublime version 1.0.0 - [user guide](https://meatbeats.com) and [changelog](https://meatbeats.com)

Made in the UK by [Meat Beats](https://meatbeats.com) using [HISE](https://hise.audio), [JUCE](https://juce.com) and [Figma](https://figma.com)

Copyright 2026 Meat Beats
");

Panel1.setPaintRoutine(function(g)
{	
	g.drawMarkdownText(markd);
});

[David Healey]

@dannytaurus I've just tested and the links don't work in a compiled project.

[dannytaurus]

@David-Healey Yeah, same here. Maybe it's because it's rendered in a plain panel and the link handling is only built into the MarkdownPanel floating tile?

Well, I'm looking at using a Web View now. It's going well except the links are opening within the web view, instead of the user's default browser. Just need to sort that out.

[David Healey]

@dannytaurus said in How to do text links in a settings panel?:

using a Web View now.

Doesn't work on Linux so not an option for me

[dannytaurus]

@David-Healey I'm a bit wary of using one too to be honest. But I don't know how else to do it without a load of old school hacks like an array of x,y coords and a mouse broadcaster, or invisible buttons on top of text.

[David Healey]

@dannytaurus Use fewer links in the design :)

[dannytaurus]

@David-Healey

[Chazrox]

@dannytaurus I just used a straight up button and changed the text to the url link. Laf for hovers and clicks etc.

[Oli Ullmann]

@dannytaurus
The safest way would probably be to use a panel with its PaintRoutine and MouseRoutine.

To ensure that the area for mouse interaction is correctly positioned over the link on every operating system, you could perhaps use Engine.getStringWidth(String text, String fontName, float fontSize, float fontSpacing) for the calculation.

[dannytaurus]

Got it working nicely with a WebView. Very easy to implement but I'm a bit wary of using it.

I notice using CSS throws an 'experimental' warning in the console, but WebView doesn't.

Are WebViews production-ready? Who's using them in plugins right now?