Skip to content

reeseovine/webtoys

Repository files navigation

WebToys logo

WebToys

A handy and easy-to-use collection of tools every developer needs at one point or another. It's a web-based clone of DevToys built with Next.js.

why?

Because not everyone is a Windows user :)

status

WebToys is in the very early stages of development and most tools are not yet implemented. I am aiming for 1:1 feature parity with DevToys eventually, wherever that's feasible.

Below is a list of things to do. Feel free to contribute if any of them appeal to you and don't be afraid to ask for help! Make sure to read through contributing.md first before getting in too deep.

* = not in DevToys but good to have

features

  • tools
    • converters
      • json to yaml
      • number base
        • supports fractional numbers
    • encoders & decoders
      • html entities
      • url
      • base 64
      • gzip
      • json web token
    • formatters
      • pretty print*
      • minify*
      • [ ] json
      • [ ] sql
      • [ ] xml
    • generators
      • hash
      • uuid
      • lorem ipsum
      • checksum
      • QR code*
      • random number*
    • text
      • inspector / case converter
      • regex tester
      • text diff
      • markdown preview
      • escape and unescape
    • graphic
      • color blindness simulator
      • lossless image optimizer (probably not possible with just the browser)
      • image converter
        • allow drag-and-drop non-file images and pasting images from the clipboard
  • responsive navigation drawer
  • syntax highlighting and line numbering for code-related tools
  • automatically saves preferences in localStorage
  • search
  • translations
  • help dialog for each tool

code maintenance

  • generalize components like buttons and sections for quick reusability
  • make classNames easier to read
  • write type declarations where needed so that it can build
    • component props
    • helper functions
  • standardize wording used in descriptions, etc.
  • remove unused imports (mdi icon paths, for example)
  • ensure responsiveness on every component
  • ensure accessibility on every component
  • ensure everything looks good in light and dark mode
  • test PWA and make sure it works offline

issues

WebToys relies on several relatively modern browser APIs for some things to work. If something seems broken, make sure you're using the latest version of Firefox or Chrome.

If it's still broken across multiple browsers then I would greatly appreciate if you opened an issue!