{"id":28647928,"url":"https://github.com/peakk2011/mintkit","last_synced_at":"2026-03-16T21:34:24.177Z","repository":{"id":295438453,"uuid":"990115360","full_name":"Peakk2011/Mintkit","owner":"Peakk2011","description":"Dynamic Framework that allows you to adjust content in a more customizable way.","archived":false,"fork":false,"pushed_at":"2025-10-12T05:27:35.000Z","size":18076,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-13T15:38:17.074Z","etag":null,"topics":["basic-learning","basic-programming","component","cprogramming-language","css","dynamichtml","framework","html","hybrid","javascript","javascript-framework","js","jsframework","mintkit","peakk2011","web-development"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Peakk2011.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-05-25T14:35:43.000Z","updated_at":"2025-10-12T05:27:38.000Z","dependencies_parsed_at":"2025-05-29T12:47:13.116Z","dependency_job_id":"4f4e0b8c-a43a-4995-823f-987b658381b1","html_url":"https://github.com/Peakk2011/Mintkit","commit_stats":null,"previous_names":["peakk2011/mint_nextgenjs","peakk2011/mintkit"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/Peakk2011/Mintkit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Peakk2011%2FMintkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Peakk2011%2FMintkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Peakk2011%2FMintkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Peakk2011%2FMintkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Peakk2011","download_url":"https://codeload.github.com/Peakk2011/Mintkit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Peakk2011%2FMintkit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279016932,"owners_count":26085910,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["basic-learning","basic-programming","component","cprogramming-language","css","dynamichtml","framework","html","hybrid","javascript","javascript-framework","js","jsframework","mintkit","peakk2011","web-development"],"created_at":"2025-06-13T03:10:17.048Z","updated_at":"2025-10-13T20:38:17.529Z","avatar_url":"https://github.com/Peakk2011.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://drive.google.com/uc?id=1tcAEV3cKmi2YCMHhAvW3KlXI6bwqc9uy\" height=\"150px\" width=\"150px\"\u003e\u003c/img\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eMintkit\u003c/h1\u003e\n\n## About Mintkit\n\nMintkit is a moderate JavaScript framework that simplifies web development by combining dynamic content management features in a single, easy-to-use, intuitive tool with\na simplifies the website creation process while maintaining flexibility and performance, allowing you to focus on creating innovative web applications smoothly.\n\n## Why Choose Mintkit?\n\nMintkit eliminates the need for multiple libraries and frameworks by providing everything you need in one cohesive package\nWhether you are building a simple website or a complex web application, Mintkit can take action and make you happy to create with it.\n\n## Additional documents\n\n[Get Started with Mintkit framework](https://amaikoe.nekosakura.work/blog/en/getting-started-mintkit)\n\n## Features\n\n### State Management \u0026 Virtual DOM\n\n- **Reactive State System**: Automatic re-rendering when state changes\n- **Virtual DOM**: Efficient DOM diffing and patching\n- **Component Architecture**: Modular and reusable components\n\n### Design System\n\n- **Typography**: Google Fonts integration with comprehensive font system\n- **Spacing Scale**: Consistent spacing from 0-32rem\n- **Theme System**: Automatic light/dark theme switching\n- **Responsive Design**: Built-in breakpoint system\n- **Animation**: Smooth transitions and keyframes\n\n### Development Tools\n\n- **Live Reload**: Hot reloading development server\n- **MintAssembly**: HTML-based programming language\n- **Electron Support**: Desktop application framework\n- **Performance Monitoring**: Built-in performance tracking\n\n## Get Started\n\n### 1. Basic Setup\n\n```html\n\u003c!-- index.html --\u003e\n\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e\n    \u003ctitle\u003eMintkit pure HTML\u003c/title\u003e\n    \u003clink rel=\"dns-prefetch\" href=\"//mint-teams.web.app\" /\u003e\n    \u003clink rel=\"preconnect\" href=\"https://mint-teams.web.app\" crossorigin /\u003e\n    \u003clink\n      rel=\"modulepreload\"\n      href=\"https://mint-teams.web.app/Mintkit/mint.js\"\n    /\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n\n    \u003cscript type=\"module\"\u003e\n      import { Mint } from \"https://mint-teams.web.app/Mintkit/mint.js\";\n\n      const app = `\n            \u003ch1\u003e\n                Hello, Mintkit!\n            \u003c/h1\u003e\n        `;\n\n      queueMicrotask(() =\u003e Mint.injectHTML(\"#app\", app));\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### 2. Add your page content\n\n```PseudoCode\n// Create your content file ex. Content.js\n// Link your content file into Mintkit pages (index.html)\nJavascript -\u003e import { Content } from 'content.js';\n```\n\n```js\n// content.js\n\nexport const Content = {\n  components: `\n      \u003c!-- Enter html code here --\u003e\n      \u003cbutton\u003eHello mintkit\u003c/button\u003e\n  `,\n  stylesheet: `\n      /*\n          Enter your CSS code here\n      */\n  `,\n};\n```\n\nThan you go back into Mintkit pages (index.html) and insert this code inside script tag\n\n```js\nimport { Mint } from \"https://mint-teams.web.app/Mintkit/mint.js\";\nimport { Content } from \"content.js\";\n\nconst App = () =\u003e {\n  const root = {\n    html: Content.components,\n    css: Content.stylesheet,\n  };\n\n  queueMicrotask(() =\u003e {\n    Mint.injectHTML(\"#app\", root.html);\n  });\n};\n\nApp();\n```\n\n### 3. include you css with Mintkit\n\n```js\nMint.include(\"./redistributables/design/mint-uas.css\");\n```\n\n## Build-in Features\n\n### State Management\n\n```javascript\nconst state = Mint.createState({ count: 0 });\n\n// Update state\nstate.set((s) =\u003e ({ ...s, count: s.count + 1 }));\n\n// Subscribe to changes\nstate.subscribe((newState) =\u003e {\n  console.log(\"State updated:\", newState);\n});\n```\n\n### Theme System\n\n```javascript\nconst lightTheme = {\n  ColorPrimary: \"#FFFFFF\",\n  TextColorPrimary: \"#080707\",\n};\n\nconst darkTheme = {\n  ColorPrimary: \"#000000\",\n  TextColorPrimary: \"#FFD9D9\",\n};\n\nWebContent.initThemeSystem();\n```\n\n## Development\n\n### Live Reload Server\n\n```bash\ncd mintkit\n./LiveServer.exe\n# Open http://localhost:3000\n```\n\n## Project Structure\n\n```mermaid\nflowchart TD\n    A[Usage] --\u003e B[mintkit-implementation]\n    B --\u003e C[Framework]\n    \n    C --\u003e D[event.js]\n    C --\u003e E[mint.d.ts]\n    C --\u003e F[mint.js]\n    C --\u003e G[mintassembly.js]\n    C --\u003e H[mintkit.js]\n    \n    B --\u003e I[redistributables]\n    I --\u003e J[index.html]\n    \n    B --\u003e K[LiveServer.exe]\n    B --\u003e L[LiveServer.o]\n    \n    style A fill:#2196F3,stroke:#1976D2,stroke-width:3px,color:#ffffff\n    style B fill:#9C27B0,stroke:#7B1FA2,stroke-width:3px,color:#ffffff\n    style C fill:#FF9800,stroke:#F57C00,stroke-width:3px,color:#ffffff\n    style D fill:#4CAF50,stroke:#388E3C,stroke-width:2px,color:#ffffff\n    style E fill:#4CAF50,stroke:#388E3C,stroke-width:2px,color:#ffffff\n    style F fill:#4CAF50,stroke:#388E3C,stroke-width:2px,color:#ffffff\n    style G fill:#4CAF50,stroke:#388E3C,stroke-width:2px,color:#ffffff\n    style H fill:#4CAF50,stroke:#388E3C,stroke-width:2px,color:#ffffff\n    style I fill:#00BCD4,stroke:#0097A7,stroke-width:3px,color:#ffffff\n    style J fill:#FFC107,stroke:#FF8F00,stroke-width:2px,color:#000000\n    style K fill:#F44336,stroke:#D32F2F,stroke-width:2px,color:#ffffff\n    style L fill:#F44336,stroke:#D32F2F,stroke-width:2px,color:#ffffff\n```\n\n## Contributing\n\nWe welcome all contributions to **Mintkit**! Here's how you can help to improve:\n\n### How to Contribute\n\n1. **Fork** this repository and clone it to your local machine.\n2. **Create** a new branch for your changes.\n3. **Make** your changes and write tests (if applicable).\n4. **Ensure** that the code passes all tests and follows the project's style guidelines.\n5. **Commit** your changes with clear, concise commit messages.\n6. **Push** your changes and create a pull request with a detailed explanation.\n\n### Contribution Guidelines\n\n- **Code Style**: Follow the existing code style and conventions\n- **Documentation**: Update documentation for any new features\n- **Testing**: Add tests for new functionality\n- **Performance**: Consider performance implications of changes\n- **Compatibility**: Ensure changes work across different browsers\n\n## Links\n\n- **GitHub Repository**: https://github.com/Peakk2011/Mintkit\n- **CDN**: https://cdn.jsdelivr.net/gh/Peakk2011/Mintkit@main/plugins/core/lib/mint.js\n\n---\n\n`npx create-mint-app` to create Mintkit project \u003cbr\u003e\n\n**Mintkit** - Making web development dynamic and more customizable way.\n\n## License\nThis project is licensed under the MIT License go and see the [LICENSE](./LICENSE.md) file for details.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeakk2011%2Fmintkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeakk2011%2Fmintkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeakk2011%2Fmintkit/lists"}