question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow running `ink` in the browser

See original GitHub issue

I tried out running ink in the browser and there seem to be the following complications:

First point of failure is, that readline doesn’t exist in the browser https://github.com/vadimdemedes/ink/blob/master/src/components/App.js#L1

As we just want a non-interactive renderer which we plug in to xterm.js, we don’t need readline.

Removing readline gives the next error: stdin not defined.

That can also be fixed, by passing it into the render function.

Last problem: Chalk doesn’t render the colors, even though xterm is able to render them.

I created an example app that even supports the keyboard events and rerendering with a spinner component: https://github.com/timsuchanek/ink-browser

Demo: https://ink-demo.netlify.com/

You can click into the terminal and go up and down in the select 😉

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:1
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
skorfmanncommented, Feb 15, 2021

Here’s a demo running ink with xtermjs in a browser https://ink-storybook.netlify.app/ - Would be cool to actually make this into a storybook component 😃 - see https://github.com/storybookjs/storybook/issues/11607 as well

1reaction
ar-tocommented, Jun 12, 2022

this feature could make this project more interesting.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Ink API - MDN Web Docs
The Ink API allows browsers to directly make use of available OS-level compositors when drawing pen stokes in an inking app feature, ...
Read more >
Enabling SMART Ink on specific applications
This article explains how to enable SMART Ink for specific applications if a user has set the ink to be off permanently per...
Read more >
523149 - please allow draft printing in chrome to save on ink
It's hidden under "More Settings" and it allows me to pick between 600 DPI and 1200 DPI. Presumably the lowest DPI setting is...
Read more >
Enable Windows Ink Workspace Without a Stylus in Windows 10
Enable Windows Ink Workspace in Windows 10 without a Stylus or Touchscreen ... If Windows 10 doesn't detect touch support, you won't see...
Read more >
HTML Framework with Save/Load Functionality #547 - GitHub
This is done by calling inkgame.setPageClearing(true) in JS or the global tag # pageclearing: true in Ink to enable the Twine-like paging. If...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found