Several years ago, I wrote about how to add a custom DuckDuckGo search box to your website. When I was still running analytics on my site, that blog post was consistently in the top 3–5 visited articles on my blog.

For the last year and a half, I’ve been writing a lot of React. Earlier this year, React 16.8 was released with the ability to use Hooks which allow you to use state and other React features without writing a class. As someone who learns best by doing, I wanted to create a project that would provide an opportunity to learn this new technology.

Today, I’m excited to share the fruits of that labour. The DuckDuckGo Search Box Generator is a single-page React app that allows anyone to create a customized DuckDuckGo search form for their website.

The app features a live preview of what the search results will look like, allowing quick iteration to create a design that best works for you.

There’s also a live DuckDuckGo search form on the site that lets you test your settings on a real DuckDuckGo result page. Your settings are stored in your browser’s localStorage so that they’re saved for when you return to the generator. This makes iterating and testing new designs very quick and easy.

The code for the app is available on Github and is released under the MIT License. Issues and support requests can be filed on the Issues page and of course, pull requests are welcome!

If you or someone you know runs a website that needs a simple, privacy-focused solution for search, give the DuckDuckGo Search Box Generator a try!

※ Permalink for “I designed a custom search box generator for DuckDuckGo” published on date_to_rfc822