This content originally appeared on Go Make Things and was authored by Go Make Things
Last night, I released a Custom Download tool for Kelp.
You check/uncheck the features you want, then click the Download CSS and Download JS buttons to instantly download a custom version of Kelp with just the stuff you want.
So how does it work? It’s shockingly simple!
I created an array of component files (it’s ID, title, and the URL paths for the files for that component).
const features = [
['core', 'Core Library (required)', 'file/path/1.css', 'file/path/2.css', '...'],
['cont', 'Containers', 'file/path/containers.css'],
// ...
];
When the page loads, it loops through the array and uses the fetch() method to get the buildless modules from the CDN.
I create an object of feature IDs and the CSS and JS (saved as strings) for each feature.
const code = {
core: {
css: '...',
js: '...',
},
// ...
}
Without getting into too much detail, I also use a regex pattern to identify the import functions in the JS files, and fetch those files, too.
When you click one of the Download * buttons, the script gets all of the checked features, matches the ID of the feature to either the css or js property for that feature in the code object, and builds a concatenated string.
Then, it uses Eli Grey’s FileSaver.js library to create a download file from the string.
For the JavaScript, I also add any of the imported functions, and wrap the whole thing in an IIFE to keep the code out of the global scope.
I theoretically could have run ESBuild or RollupJS in the browser to do a “real build,” but those involved sending a lot of client-side code that felt unnecessary given how Kelp is structured (no nested imports to manage, for example).
This was heavily inspired by PrismJS by Lea Verou, and supports Kelp’s goal of being a build-free tool.
Kelp is officially out of beta in v1 stable. If you have any questions, get in touch!
Like this? A Lean Web Club membership is the best way to support my work and help me create more free content.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2025-08-19T14:30:00+00:00) Building a custom download GUI. Retrieved from https://www.scien.cx/2025/08/19/building-a-custom-download-gui/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.