Email or username:

Password:

Forgot your password?
Simon Willison

I built a tiny JavaScript library providing async alternatives to the built-in blocking browser APIs alert() and confirm() and prompt() simonwillison.net/2024/Dec/7/p

await Prompts.alert(
"This is an alert message!"
);
const confirmedBoolean = await Prompts.confirm(
"Are you sure you want to proceed?"
);
const nameString = await Prompts.prompt(
"Please enter your name"
);

I got the new OpenAI o1 to do most of the heavy lifting - it's really useful for this kind of exploration

11 comments
James Scholes

@simon Just noting that these are nowhere near as accessible as the built-in, non-async versions, particularly with a screen reader. A totally fixable problem, just wanted to make you aware.

Stuart Langridge

@jscholes @simon ah, I came to point out <dialog>, indeed :) this is entirely what it's for, and it's designed well at it

Simon Willison

@sil @jscholes I just shipped a new version that uses dialog and I think it's a lot better, but would love to hear any accessibility feedback on it tools.simonwillison.net/prompt

Thomas Steiner :chrome:

@simon @sil @jscholes I'd engineer it by creating a set of `<template>`s for all dialog types (maybe lazily on demand even) and then `clone()` them whenever I need them. Also, I'd make them completely barebones when it comes to design, so they can fit in wherever.

Thomas Steiner :chrome:

@simon @sil @jscholes Ah, and I see you have an Issue open for this already, but you really want to allow users to only `import` the dialog type(s) they need. Given what you have, an LLM should be able to get you there.

rugk

@simon
Looks like bootstrap kinda😅

Simon Willison

Released an improved version that uses the built-in browser dialog.showModal() method - it's just 4.47KB now, 1.1KB minified and gzipped github.com/simonw/prompts-js/r

Simon Willison

Added some notes on things I've learned from hacking on this project (using o1 and Claude 3.5 Sonnet): simonwillison.net/2024/Dec/7/p

Plus a TIL about publishing to NPM using GitHub Actions and GitHub Releases: til.simonwillison.net/npm/npm-

The const name = await askUserSomething() pattern really does work, and it feels great. I love the idea of being able to await a potentially lengthy user interaction like this.
HTML <dialog> elements are usable across multiple browsers now.
Using a <dialog> means you can skip implementing an overlay that dims out the rest of the screen yourself—that will happen automatically.
A <dialog> also does the right thing with respect to accessibility and preventing keyboard access to other elements on the page while that dialog is open.
If you set <form method="dialog"> in a form inside a dialog, submitting that form will close the dialog automatically.
The dialog.returnValue will be set to the value of the button used to submit the form.
Jmelloy

@simon const blah = await is great, except for the 999 pull requests I have for “whoops, missed an await”.

Go Up