All tools are free to use and we store no data. Tea - because I am British and love it.
Code Generator
Generate boilerplate code for common patterns and frameworks. All code generation happens in your browser.
Template Selection
Generated Code
`,
options: [
{ id: 'componentName', label: 'Component Name', type: 'text', default: 'MyComponent' },
{ id: 'initialValue', label: 'Initial Value', type: 'text', default: '0' },
{ id: 'title', label: 'Title', type: 'text', default: 'Hello World' }
]
},
'vue-composition': {
code: (opts) => `
${opts.title || 'Hello World'}
Count: {{ count }}
`,
options: [
{ id: 'initialValue', label: 'Initial Value', type: 'text', default: '0' },
{ id: 'title', label: 'Title', type: 'text', default: 'Hello World' }
]
},
'html-boilerplate': {
code: (opts) => `
${opts.title || 'Hello World'}
`,
options: [
{ id: 'title', label: 'Page Title', type: 'text', default: 'Document' },
{ id: 'lang', label: 'Language', type: 'text', default: 'en' },
{ id: 'description', label: 'Description', type: 'text', default: '' }
]
},
'html-form': {
code: (opts) => ``,
options: [
{ id: 'action', label: 'Form Action', type: 'text', default: '#' },
{ id: 'method', label: 'Method', type: 'select', default: 'POST', options: ['GET', 'POST'] }
]
},
'js-fetch': {
code: (opts) => `async function fetchData() {
try {
const response = await fetch('${opts.url || 'https://api.example.com/data'}', {
method: '${opts.method || 'GET'}',
headers: {
'Content-Type': 'application/json',
},
${opts.body ? `body: JSON.stringify(${opts.body}),` : ''}
});
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
console.log(data);
return data;
} catch (error) {
console.error('Error:', error);
}
}
fetchData();`,
options: [
{ id: 'url', label: 'API URL', type: 'text', default: 'https://api.example.com/data' },
{ id: 'method', label: 'Method', type: 'select', default: 'GET', options: ['GET', 'POST', 'PUT', 'DELETE'] }
]
},
'js-class': {
code: (opts) => `class ${opts.className || 'MyClass'} {
constructor(${opts.constructorParams || ''}) {
${opts.constructorBody || '// Initialize'}
}
${opts.methodName || 'myMethod'}() {
// Method implementation
}
}
const instance = new ${opts.className || 'MyClass'}();`,
options: [
{ id: 'className', label: 'Class Name', type: 'text', default: 'MyClass' },
{ id: 'constructorParams', label: 'Constructor Params', type: 'text', default: '' },
{ id: 'methodName', label: 'Method Name', type: 'text', default: 'myMethod' }
]
},
'css-reset': {
code: () => `* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.6;
color: #333;
}`,
options: []
},
'css-flexbox': {
code: (opts) => `.container {
display: flex;
flex-direction: ${opts.direction || 'row'};
justify-content: ${opts.justify || 'flex-start'};
align-items: ${opts.align || 'stretch'};
gap: ${opts.gap || '1rem'};
flex-wrap: ${opts.wrap || 'nowrap'};
}`,
options: [
{ id: 'direction', label: 'Direction', type: 'select', default: 'row', options: ['row', 'column', 'row-reverse', 'column-reverse'] },
{ id: 'justify', label: 'Justify Content', type: 'select', default: 'flex-start', options: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around'] },
{ id: 'align', label: 'Align Items', type: 'select', default: 'stretch', options: ['stretch', 'flex-start', 'flex-end', 'center', 'baseline'] },
{ id: 'gap', label: 'Gap', type: 'text', default: '1rem' },
{ id: 'wrap', label: 'Wrap', type: 'select', default: 'nowrap', options: ['nowrap', 'wrap', 'wrap-reverse'] }
]
}
};
const templateSelect = document.getElementById('template-select');
const optionsContainer = document.getElementById('options-container');
const templateOptions = document.getElementById('template-options');
const codeOutput = document.getElementById('code-output');
let currentOptions = {};
templateSelect.addEventListener('change', () => {
const templateKey = templateSelect.value;
if (!templateKey) {
templateOptions.classList.add('hidden');
codeOutput.value = '';
return;
}
const template = templates[templateKey];
currentOptions = {};
// Build options UI
optionsContainer.innerHTML = '';
template.options.forEach(opt => {
const div = document.createElement('div');
div.className = 'space-y-1';
const label = document.createElement('label');
label.className = 'block text-sm font-medium text-neutral-700 dark:text-neutral-300';
label.textContent = opt.label;
label.setAttribute('for', opt.id);
let input;
if (opt.type === 'select') {
input = document.createElement('select');
opt.options.forEach(option => {
const optionEl = document.createElement('option');
optionEl.value = option;
optionEl.textContent = option;
if (option === opt.default) optionEl.selected = true;
input.appendChild(optionEl);
});
} else {
input = document.createElement('input');
input.type = opt.type || 'text';
input.value = opt.default || '';
}
input.id = opt.id;
input.className = 'w-full p-2 border border-neutral-300 dark:border-neutral-600 rounded bg-white dark:bg-neutral-800';
input.addEventListener('input', generateCode);
div.appendChild(label);
div.appendChild(input);
optionsContainer.appendChild(div);
currentOptions[opt.id] = opt.default || '';
});
templateOptions.classList.remove('hidden');
generateCode();
});
function generateCode() {
const templateKey = templateSelect.value;
if (!templateKey) return;
// Collect current option values
template.options.forEach(opt => {
const input = document.getElementById(opt.id);
if (input) {
currentOptions[opt.id] = input.value;
}
});
const template = templates[templateKey];
codeOutput.value = template.code(currentOptions);
}
function copyCode() {
codeOutput.select();
document.execCommand('copy');
const btn = event.target;
const original = btn.textContent;
btn.textContent = 'Copied!';
setTimeout(() => btn.textContent = original, 2000);
}
function downloadCode() {
const text = codeOutput.value;
if (!text) {
alert('No code to download');
return;
}
const ext = templateSelect.value.includes('html') ? 'html' :
templateSelect.value.includes('css') ? 'css' :
templateSelect.value.includes('vue') ? 'vue' : 'js';
const blob = new Blob([text], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `generated.${ext}`;
a.click();
URL.revokeObjectURL(url);
}
