Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

How to integrate a lightweight text generator into a KeenThemes UI page?


Hi devs,

I’m working on a project using one of the KeenThemes frontend templates and I’d like to add a simple text generator feature to a dashboard page. The idea is to let users type a short phrase and instantly see it rendered in a bold visual style without heavy backend logic — similar to lightweight online tools that generate styled text.

For example, I’ve used this basic web tool for quick experiments and UI prototyping: allbratgenerator.com
, it’s just HTML/CSS/JS and outputs stylized text visuals instantly in the browser.

My questions are:

What’s the best way to embed or integrate a client-side generator like this into a KeenThemes layout (especially with Metronic components)?

Should I wrap the generator in a custom plugin/module or place it as a standalone widget inside a card/container?

Any advice on keeping performance responsive when generating many visuals on the fly?

Thanks in advance for your guidance!


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi

Metronic v8 (Bootstrap) and v9 (Tailwind/KtUI) both have card components and dashboard layouts. Add one card in the right column or section of your dashboard and place your generator’s HTML (input + output element) inside that card. No need to change the main layout structure.

Debounce or throttle the input (e.g. 150–300 ms) so you don’t re-run the generator on every keystroke.

If you share which Metronic version you’re using (v8 Bootstrap or v9 Tailwind), we can point you to the exact card markup.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(