Magyar README
A TypeScript library for creating complex HTML blocks and form elements using JavaScript. Built on top of DOMelemJS.
50+ components – form inputs, buttons, navigation, content blocks, custom pickers, drawers, modals, carousels, and more.
- 50+ UI components – inputs, buttons, tables, modals, navigation, alerts, and more
- Framework-agnostic – works with any JS framework or vanilla JS
- Type-safe – full TypeScript support with IntelliSense
- Tree-shakable – import only what you need
- Portal support – drawers and modals render to
document.body automatically
npm install createdomblocks
<linkrel="stylesheet" href="https://unpkg.com/createdomblocks/dist/style.css" /><scriptsrc="https://unpkg.com/createdomblocks/dist/index.js"></script>
This exposes a global CreateDOMBlocks object with all exported functions.
import{createTextInput,createButton,createCard}from"createdomblocks";import"createdomblocks/style.css";constparent=document.getElementById("app");createTextInput({
parent,id: "name",labelText: "Name:",placeholder: "Enter your name",});createButton({
parent,id: "submitBtn",text: "Submit",click: ()=>console.log("Clicked!"),});createCard({
parent,id: "infoCard",title: "Welcome",body: {tag: "p",text: "Hello from createDOMBlocks!"},});| Function | Description |
|---|
createTextInput(params) | Text input with label |
createTelInput(params) | Telephone input |
createUrlInput(params) | URL input |
createSearchInput(params) | Search input |
createEmailInput(params) | Email input |
createPasswordInput(params) | Password input |
createNumberInput(params) | Number input |
createDateInput(params) | Date input |
createDatetimeInput(params) | Datetime-local input |
createTimeInput(params) | Time input |
createMonthInput(params) | Month input |
createWeekInput(params) | Week input |
createCheckbox(params) | Checkbox input |
createColorInput(params) | Color input |
createFileInput(params) | File input |
createRangeInput(params) | Range slider (min/max/step) |
createHiddenInput(params) | Hidden input |
| Function | Description |
|---|
createButton(params) | <button> element with click handler |
createButtonInput(params) | <input type="button"> |
createSubmitInput(params) | <input type="submit"> |
createResetInput(params) | <input type="reset"> |
| Function | Description |
|---|
createSelect(params) | Native <select> dropdown |
createRadio(params) | Radio button group |
createCustomSelect(params) | Styled custom dropdown |
createTextarea(params) | Textarea input element |
| Function | Description |
|---|
createCustomDatePicker(params) | Interactive date picker |
createCustomDateTimePicker(params) | Date + time picker |
createCustomDateRangePicker(params) | Date range picker |
createCustomMonthPicker(params) | Month picker |
createCustomWeekPicker(params) | Week picker |
| Function | Description |
|---|
createCard(params) | Card with header / body / footer |
createContainer(params) | Max-width wrapper container |
createGrid(params) | CSS grid with configurable columns |
createDivider(params) | Horizontal rule <hr> |
| Function | Description |
|---|
createNav(params) | Navigation bar with items and dropdowns |
createBreadcrumb(params) | Breadcrumb trail |
createTabs(params) | Tabbed interface |
createMenu(params) | Menu list (used inside drawers) |
createDrawer(params) | Side panel (portal – renders to body) |
openDrawer(id) | Open a drawer by ID |
closeDrawer(id) | Close a drawer by ID |
| Function | Description |
|---|
createAlert(params) | Alert box (success/error/warning/info) |
createToast(params) | Auto-dismissing notification |
createBadge(params) | Status badge / pill |
createSpinner(params) | Loading spinner (sm/md/lg) |
createProgressBar(params) | Progress bar with percentage |
| Function | Description |
|---|
createParagraph(params) | <p> element |
createTitle(params, level) | Heading (h1–h6) |
createImage(params) | Figure with image + optional caption |
createLink(params) | Styled <a> link |
createCodeBlock(params) | Code block with syntax highlighting |
createBlockquote(params) | Blockquote with optional author |
createAccordion(params) | Collapsible accordion sections |
createTooltip(params) | Tooltip (hover or click trigger) |
createAvatar(params) | User avatar (image or initials) |
createUnorderedList(data, params) | Unordered (bulleted) list |
createOrderedList(data, params) | Ordered (numbered) list |
newLine(parent) | Line break <br> |
asyncImage(params) | Lazy-loaded image |
| Function | Description |
|---|
createTable(data, params) | Table with header/footer/sum/row numbers |
| Function | Description |
|---|
createModal(content, actions, params) | Modal dialog (portal – renders to body) |
openModal(id) | Open a modal by ID |
closeModal(id) | Close a modal by ID |
| Function | Description |
|---|
createForm(params) | Form element with input configs |
| Function | Description |
|---|
createCarousel(params) | 3D carousel with navigation and touch |
createDragAndDropFileInput(params) | Drag & drop file uploader |
All components accept a params object. Common fields:
| Parameter | Type | Description |
|---|
parent | HTMLElement | string | Parent element or CSS selector (required) |
id | string | Element ID (required) |
class | string | Additional CSS class |
handleEvent | EventHandler | EventHandler[] | Event handlers |
Input components additionally support:
| Parameter | Type | Default | Description |
|---|
labelText | string | – | Label text |
labelfirst | boolean | true | Label before input |
value | string | number | – | Initial value |
name | string | – | Input name attribute |
placeholder | string | – | Placeholder text |
onChange | (e: Event) => void | – | Change handler |
click | (e: Event) => void | – | Click handler |
| Parameter | Type | Default | Description |
|---|
hasHeader | boolean | true | First row is header |
showFooter | boolean | true | Show footer row |
addRowNumbers | boolean | false | Add row number column |
sumRowValues | boolean | false | Add sum column |
cellNames | object | – | Custom header names |
createDrawer and createModal are portal components – they automatically render their HTML to document.body. They do not accept a parent parameter.
// Drawer with menucreateDrawer({id: "sidebar",title: "Menu",children: [createMenu({id: "nav",items: menuItems})],mode: "push",defaultState: "closed",});openDrawer("sidebar");// ModalcreateModal({modalTitle: "Confirm",body: {tag: "p",text: "Are you sure?"}},{okAction: ()=>console.log("OK"),cancelAction: ()=>console.log("Cancelled")},{id: "confirmModal"});openModal("confirmModal");
import{createTextInput,createSelect,createButton,createTable,createCard,createToast}from"createdomblocks";constparent=document.getElementById("app");createCard({
parent,id: "formCard",title: "User Form",body: [createTextInput({ parent,id: "name",labelText: "Name:",placeholder: "Enter name"}),createSelect({ parent,id: "role",labelText: "Role:",options: [{text: "Admin",value: "admin"},{text: "User",value: "user"},]}),createButton({ parent,id: "saveBtn",text: "Save",click: ()=>{createToast({parent: document.body,message: "Saved!",type: "success"});}}),],});MIT © Viktor Bozzay