<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: devkitlab</title>
    <description>The latest articles on DEV Community by devkitlab (@devkitlab).</description>
    <link>https://dev.to/devkitlab</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3971669%2F7ba0d3ba-db91-4978-b38b-44adb65a66b0.jpg</url>
      <title>DEV Community: devkitlab</title>
      <link>https://dev.to/devkitlab</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/devkitlab"/>
    <language>en</language>
    <item>
      <title>Building a Local-First Toolbox for Everyday Digital Work</title>
      <dc:creator>devkitlab</dc:creator>
      <pubDate>Wed, 10 Jun 2026 09:03:05 +0000</pubDate>
      <link>https://dev.to/devkitlab/building-a-local-first-toolbox-for-everyday-digital-work-nhf</link>
      <guid>https://dev.to/devkitlab/building-a-local-first-toolbox-for-everyday-digital-work-nhf</guid>
      <description>&lt;p&gt;I’ve been working on a small tools website called &lt;strong&gt;DevKitLab&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;It’s not a complicated idea. Most of the tools are things people already know: JSON formatting, JSON diff, regex testing, cron expressions, QR code generation, even Morse code.&lt;/p&gt;

&lt;p&gt;None of these sound new.&lt;/p&gt;

&lt;p&gt;But that’s kind of the point.&lt;/p&gt;

&lt;p&gt;A lot of online tools are “good enough” only when the input is perfect. They work for clean examples, small snippets, and simple cases. But in real work, the data is usually not that clean.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It may come from logs. &lt;/li&gt;
&lt;li&gt;It may come from an API response. &lt;/li&gt;
&lt;li&gt;It may be copied from someone else’s system. &lt;/li&gt;
&lt;li&gt;It may be too large for a basic textarea. &lt;/li&gt;
&lt;li&gt;It may be valid, but still hard to read.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So I didn’t want DevKitLab to be just another long list of small utilities.&lt;/p&gt;

&lt;p&gt;I wanted to take some common tools and make them feel a little more considered.&lt;/p&gt;




&lt;h2&gt;
  
  
  JSON Formatter: not just pretty-printing
&lt;/h2&gt;

&lt;p&gt;JSON Formatter is one of the tools I cared about the most.&lt;/p&gt;

&lt;p&gt;I use JSON formatters all the time, but most of them feel the same: paste JSON, click format, get indented output.&lt;/p&gt;

&lt;p&gt;That works when the input is already valid and small.&lt;/p&gt;

&lt;p&gt;But that’s not always what happens.&lt;/p&gt;

&lt;p&gt;Sometimes the JSON is copied from logs and has extra characters around it.&lt;br&gt;&lt;br&gt;
Sometimes it has a trailing comma or a missing quote.&lt;br&gt;&lt;br&gt;
Sometimes a value is actually an escaped JSON string, so the structure is hidden inside another string.&lt;br&gt;&lt;br&gt;
Sometimes the file is a few MB, and the page starts to feel slow.&lt;/p&gt;

&lt;p&gt;For this tool, I didn’t want to build only a textarea with a format button.&lt;/p&gt;

&lt;p&gt;I wanted it to feel more like a lightweight JSON editor.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It can try to repair common JSON issues. &lt;/li&gt;
&lt;li&gt;It can expand escaped JSON values so you don’t have to copy them into another tool. &lt;/li&gt;
&lt;li&gt;It supports folding and expanding nodes, so large JSON is easier to browse. &lt;/li&gt;
&lt;li&gt;It is designed to stay usable with JSON that is a few MB in size. &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The experience is closer to working in VS Code than using a basic online formatter.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn0wj76douwpq34adn7j1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn0wj76douwpq34adn7j1.png" alt="DevKitLab JSON Formatter interface with formatted JSON and collapsible tree view" width="800" height="421"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This tool shaped a lot of how I think about the rest of the site.&lt;/p&gt;

&lt;p&gt;A small tool should not only work for demo input. It should help with the messy cases people actually run into.&lt;/p&gt;




&lt;h2&gt;
  
  
  JSON Diff: comparing structure, not just text
&lt;/h2&gt;

&lt;p&gt;JSON Diff is another tool I wanted to make more useful than a plain text comparison.&lt;/p&gt;

&lt;p&gt;When I compare JSON, I’m usually not interested in whitespace or formatting changes. I want to know what actually changed in the data.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Did a field get added? &lt;/li&gt;
&lt;li&gt;Was something removed? &lt;/li&gt;
&lt;li&gt;Did a value change? &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Is the difference real, or is it just formatting?&lt;/p&gt;

&lt;p&gt;This happens a lot when comparing API responses, config files, test results, or data from two environments.&lt;/p&gt;

&lt;p&gt;A normal text diff can be noisy for JSON. If the formatting changes, it may look like everything changed, even when the data is mostly the same.&lt;/p&gt;

&lt;p&gt;So the goal of JSON Diff is to make the meaningful changes easier to see.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg5uwzt3dhfpc6yqoqiw4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg5uwzt3dhfpc6yqoqiw4.png" alt="DevKitLab JSON Diff comparing two similar JSON objects and highlighting small field-level changes" width="800" height="422"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For me, this kind of tool is useful when it reduces the amount of guessing. I don’t want to stare at two large blocks of text and mentally filter out the noise.&lt;/p&gt;




&lt;h2&gt;
  
  
  Regex Tester: make debugging feel less like guessing
&lt;/h2&gt;

&lt;p&gt;Regex is powerful, but it’s also very easy to get wrong.&lt;/p&gt;

&lt;p&gt;Most regex testers can show whether a pattern matches the text. That is useful, but it is not always enough.&lt;/p&gt;

&lt;p&gt;When I debug a regex, I usually want to understand the pattern piece by piece. If I hover over a part of the expression, I want to see what it means. If something matches, I want to know why. If something does not match, I want to find the exact part that needs to change.&lt;/p&gt;

&lt;p&gt;So I wanted this tool to feel more like a small regex workspace, not just a match checker.&lt;/p&gt;

&lt;p&gt;The flow I had in mind was:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Write a pattern. &lt;/li&gt;
&lt;li&gt;Hover over parts of the regex to understand what they do. &lt;/li&gt;
&lt;li&gt;Test it against real text. &lt;/li&gt;
&lt;li&gt;See highlighted matches and match details. &lt;/li&gt;
&lt;li&gt;Try replace when the goal is transformation, not just matching. &lt;/li&gt;
&lt;li&gt;Try split when the pattern is used as a separator. &lt;/li&gt;
&lt;li&gt;Use explain to make the expression easier to read. &lt;/li&gt;
&lt;li&gt;Export the pattern as code when it is ready to use.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;DevKitLab Regex Tester showing a regular expression tested against sample text with highlighted matches&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe5uia86hj32b70hxhi1e.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe5uia86hj32b70hxhi1e.png" alt="DevKitLab Regex Tester showing a regular expression tested against sample text with highlighted matches" width="799" height="432"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The point is not to make regex simple. Regex probably won’t ever feel simple.&lt;/p&gt;

&lt;p&gt;But the tool should make the feedback clearer. It should help you move from “I think this pattern works” to “I understand why this pattern works, and I can use it in code.”&lt;/p&gt;




&lt;h2&gt;
  
  
  Cron Expression: turning a short string into real times
&lt;/h2&gt;

&lt;p&gt;Cron expressions are small, but they are not very readable.&lt;/p&gt;

&lt;p&gt;Something like &lt;code&gt;0 9 * * 1-5&lt;/code&gt; is fine if you write cron all the time. But once the expression becomes a little more complex, I often want to double-check it.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Will it run when I think it will run? &lt;/li&gt;
&lt;li&gt;What are the next few execution times? &lt;/li&gt;
&lt;li&gt;Did I misunderstand the day-of-week field? &lt;/li&gt;
&lt;li&gt;Is there any timezone-related confusion?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That’s what I want from a cron tool.&lt;/p&gt;

&lt;p&gt;Not just validation, but a quick way to turn the expression into something human-readable.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1j28w5ujwrvxnmjlu8n4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1j28w5ujwrvxnmjlu8n4.png" alt="DevKitLab Cron Expression tool showing a cron schedule with upcoming run times" width="800" height="425"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is one of those tools that feels small, but can save you from a very annoying mistake.&lt;/p&gt;




&lt;h2&gt;
  
  
  QR Code Generator: simple, but still worth polishing
&lt;/h2&gt;

&lt;p&gt;A QR code generator sounds almost too simple.&lt;/p&gt;

&lt;p&gt;You enter some text, and it generates a QR code.&lt;/p&gt;

&lt;p&gt;But even simple tools can be made smoother.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Sometimes the input is a URL. &lt;/li&gt;
&lt;li&gt;Sometimes it is plain text. &lt;/li&gt;
&lt;li&gt;Sometimes you want to adjust the size. &lt;/li&gt;
&lt;li&gt;Sometimes you want a quick download. &lt;/li&gt;
&lt;li&gt;Sometimes you just want the page to stay out of your way.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frli7qur4a6qo6n4402ku.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frli7qur4a6qo6n4402ku.png" alt="DevKitLab QR Code Generator showing a generated QR code with customization and download options" width="799" height="437"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For this kind of tool, I don’t think the goal is to add a huge number of features. The goal is to make the common flow fast and predictable.&lt;/p&gt;

&lt;p&gt;Open it. &lt;br&gt;
Generate the QR code. &lt;br&gt;
Download or copy it. &lt;br&gt;
Move on.&lt;/p&gt;




&lt;h2&gt;
  
  
  Morse Code: not every tool has to be serious
&lt;/h2&gt;

&lt;p&gt;Morse Code is a little different from the others.&lt;/p&gt;

&lt;p&gt;It is not something most people use every day. It is not like JSON, regex, or cron.&lt;/p&gt;

&lt;p&gt;But I still wanted to include it because a toolbox does not have to be only about serious work.&lt;/p&gt;

&lt;p&gt;Some tools are for debugging. &lt;br&gt;
Some are for productivity. &lt;br&gt;
Some are just fun to have.&lt;/p&gt;

&lt;p&gt;Morse code sits somewhere in that last category.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe1ybdajyf1mkr93jjq6b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe1ybdajyf1mkr93jjq6b.png" alt="DevKitLab Morse Code tool converting text into Morse code" width="800" height="436"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It may not be the most practical tool on the site, but I like having a few tools that make the project feel less rigid.&lt;/p&gt;




&lt;h2&gt;
  
  
  What I’m trying to build
&lt;/h2&gt;

&lt;p&gt;The more I work on DevKitLab, the less I care about simply adding more tools.&lt;/p&gt;

&lt;p&gt;More tools are useful, of course. But quantity alone is not very interesting.&lt;/p&gt;

&lt;p&gt;What matters more to me is whether each tool feels like someone actually thought about how it would be used.&lt;/p&gt;

&lt;p&gt;JSON Formatter should be more than pretty-printing.&lt;br&gt;&lt;br&gt;
JSON Diff should make real data changes easier to see.&lt;br&gt;&lt;br&gt;
Regex Tester should make debugging clearer.&lt;br&gt;&lt;br&gt;
Cron Expression should turn abstract syntax into actual times.&lt;br&gt;&lt;br&gt;
QR Code Generator should keep the common flow quick.&lt;br&gt;&lt;br&gt;
Morse Code can just be simple and enjoyable.&lt;/p&gt;

&lt;p&gt;None of these tools are huge products by themselves.&lt;/p&gt;

&lt;p&gt;But if each one removes a little friction, the whole toolbox becomes more useful.&lt;/p&gt;




&lt;h2&gt;
  
  
  Why local-first matters to me
&lt;/h2&gt;

&lt;p&gt;Another thing I care about is keeping things local whenever possible.&lt;/p&gt;

&lt;p&gt;If you only need to format JSON, that should not require uploading it.&lt;br&gt;&lt;br&gt;
If you are testing regex, the text can stay in the browser.&lt;br&gt;&lt;br&gt;
If you are generating a QR code, the browser can do that.&lt;br&gt;&lt;br&gt;
If a tool can run locally, I’d rather keep it local.&lt;/p&gt;

&lt;p&gt;Not every tool can work that way, and that’s fine.&lt;/p&gt;

&lt;p&gt;But for many everyday utilities, the browser is already enough.&lt;/p&gt;

&lt;p&gt;And in practice, the data people paste into tools is not always meaningless. It can come from work, APIs, configs, logs, files, or private notes. Even when it is not extremely sensitive, people should not have to send it somewhere if there is no reason to.&lt;/p&gt;

&lt;p&gt;So local-first is not just a technical preference for me. It is part of the product experience.&lt;/p&gt;




&lt;h2&gt;
  
  
  What’s next
&lt;/h2&gt;

&lt;p&gt;DevKitLab is still early.&lt;/p&gt;

&lt;p&gt;Some tools are close to the direction I want. Some are still too basic and need more work.&lt;/p&gt;

&lt;p&gt;I want to improve the examples, make the local-processing behavior clearer, polish the interactions, and connect related tools in a more natural way.&lt;/p&gt;

&lt;p&gt;I don’t want it to become a random collection of utilities.&lt;/p&gt;

&lt;p&gt;I want it to become the kind of site you open when you have a small digital task and just want to get it done without friction.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A JSON response to inspect. &lt;/li&gt;
&lt;li&gt;Two JSON objects to compare. &lt;/li&gt;
&lt;li&gt;A regex to debug. &lt;/li&gt;
&lt;li&gt;A cron expression to verify. &lt;/li&gt;
&lt;li&gt;A QR code to generate. &lt;/li&gt;
&lt;li&gt;A Morse message to play with.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Small things, but they come up all the time.&lt;/p&gt;

&lt;p&gt;Project: &lt;a href="https://www.devkitlab.com/" rel="noopener noreferrer"&gt;DevKitLab&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you use small online tools often, I’d love to know:&lt;/p&gt;

&lt;p&gt;What’s a tool you use regularly, but still feel could be much better?&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>productivity</category>
      <category>tools</category>
    </item>
  </channel>
</rss>
