{"id":34827360,"url":"https://github.com/profullstack/ferroframe","last_synced_at":"2026-05-25T04:34:56.058Z","repository":{"id":312724725,"uuid":"1048505074","full_name":"profullstack/ferroframe","owner":"profullstack","description":"FerroFrame (Svelte-host TUI for Node.js)","archived":false,"fork":false,"pushed_at":"2025-09-01T22:39:54.000Z","size":87,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-12-27T00:52:37.519Z","etag":null,"topics":["cli","node","terminal","tui"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@profullstack/ferroframe","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/profullstack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-09-01T14:47:25.000Z","updated_at":"2025-11-01T01:10:25.000Z","dependencies_parsed_at":"2025-09-01T17:21:56.517Z","dependency_job_id":"8ab1481b-0cf0-4d20-8974-a38b9560c7f7","html_url":"https://github.com/profullstack/ferroframe","commit_stats":null,"previous_names":["profullstack/ferroframe"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/profullstack/ferroframe","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/profullstack%2Fferroframe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/profullstack%2Fferroframe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/profullstack%2Fferroframe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/profullstack%2Fferroframe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/profullstack","download_url":"https://codeload.github.com/profullstack/ferroframe/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/profullstack%2Fferroframe/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33461090,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-25T02:24:28.008Z","status":"ssl_error","status_checked_at":"2026-05-25T02:23:23.339Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["cli","node","terminal","tui"],"created_at":"2025-12-25T15:20:33.249Z","updated_at":"2026-05-25T04:34:56.053Z","avatar_url":"https://github.com/profullstack.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FerroFrame 🦀\n\n\u003e A Svelte-host TUI framework for Node.js - Build terminal interfaces with the power of Svelte\n\nFerroFrame brings the declarative, component-based approach of Svelte to terminal user interfaces. Write TUIs using familiar web development patterns while leveraging Svelte's reactivity and compilation optimizations.\n\n## ✨ Features\n\n- **Svelte Components**: Write TUI components using Svelte's syntax and reactivity\n- **Flexbox Layout**: Familiar CSS-like flexbox layout system for terminals\n- **Reactive Updates**: Efficient rendering with Svelte's fine-grained reactivity\n- **Component Library**: Built-in components for common TUI patterns\n- **Developer Experience**: Hot reload, debugging tools, and great DX\n- **Cross-Platform**: Works on Windows, macOS, and Linux terminals\n- **CLI Tool**: Powerful `ferro` command for all operations\n\n## 🚀 Quick Start\n\n```bash\n# Install FerroFrame CLI globally\npnpm add -g @profullstack/ferroframe\n\n# Create a new FerroFrame app\nferro new my-tui-app\n\n# Navigate to your app\ncd my-tui-app\n\n# Start development server\nferro dev\n```\n\n## 📦 Installation\n\n### Global CLI Installation\n```bash\n# Install the FerroFrame CLI globally\npnpm add -g @profullstack/ferroframe\n\n# Verify installation\nferro --version\n```\n\n### Project Dependencies\n```bash\n# Add to existing project\npnpm add @ferroframe/core @ferroframe/components\n\n# For Svelte integration\npnpm add @ferroframe/svelte-adapter svelte\n```\n\n## 🛠️ CLI Commands\n\nThe `ferro` CLI provides a unified interface for all FerroFrame operations:\n\n### Creating Apps\n\n```bash\n# Create a new FerroFrame app (interactive)\nferro new my-app\n\n# Create with specific template\nferro create my-svelte-app\n# Then choose: 1) Basic TUI App or 2) Svelte TUI App\n```\n\n### Development\n\n```bash\n# Start development server with hot reload\nferro dev                        # Shows help\nferro dev core                   # Watch core package\nferro dev components             # Watch components package\nferro dev svelte-adapter         # Watch svelte-adapter\nferro dev example hello-world    # Run hello-world example\nferro dev example svelte-todo    # Run svelte-todo example\n```\n\n### Building \u0026 Testing\n\n```bash\n# Build all packages for production\nferro build\n\n# Run tests\nferro test\n\n# Watch files and run tests automatically\nferro watch\n\n# Lint your code\nferro lint\n\n# Format code with Prettier\nferro format\n```\n\n### Help \u0026 Info\n\n```bash\n# Show all available commands\nferro help\nferro --help\nferro -h\n\n# Show version\nferro version\nferro --version\nferro -v\n```\n\n## 🎯 Basic Example\n\n### Using Components Directly\n\n```javascript\n// main.js\nimport { FerroHost } from '@ferroframe/core';\nimport { Box, Text, Input, Button } from '@ferroframe/components';\n\nconst app = Box({\n  display: 'flex',\n  flexDirection: 'column',\n  padding: 2,\n  gap: 1,\n  children: [\n    Text({\n      children: 'Welcome to FerroFrame! 🎨',\n      bold: true,\n      color: 'cyan'\n    }),\n    Input({\n      placeholder: 'Enter your name...',\n      onSubmit: (value) =\u003e console.log(`Hello, ${value}!`)\n    }),\n    Button({\n      children: 'Click me!',\n      variant: 'primary',\n      onClick: () =\u003e console.log('Button clicked!')\n    })\n  ]\n});\n\nconst host = new FerroHost();\nawait host.mount(app);\n```\n\n### Using Svelte Components\n\n```svelte\n\u003c!-- App.svelte --\u003e\n\u003cscript\u003e\n  import { Box, Text, Input, Button } from '@ferroframe/components';\n  import { createFormStore } from '@ferroframe/svelte-adapter';\n  \n  const form = createFormStore({\n    name: '',\n    email: ''\n  });\n  \n  function handleSubmit() {\n    console.log('Form submitted:', $form);\n  }\n\u003c/script\u003e\n\n\u003cBox direction=\"column\" padding={2}\u003e\n  \u003cText bold color=\"cyan\"\u003eWelcome to FerroFrame!\u003c/Text\u003e\n  \n  \u003cBox direction=\"row\" gap={1}\u003e\n    \u003cInput \n      placeholder=\"Name\" \n      value={$form.name}\n      onChange={(v) =\u003e form.setFieldValue('name', v)}\n    /\u003e\n    \u003cInput \n      placeholder=\"Email\" \n      value={$form.email}\n      onChange={(v) =\u003e form.setFieldValue('email', v)}\n    /\u003e\n  \u003c/Box\u003e\n  \n  \u003cButton onClick={handleSubmit} variant=\"primary\"\u003e\n    Submit\n  \u003c/Button\u003e\n\u003c/Box\u003e\n```\n\n```javascript\n// main.js\nimport { FerroHost } from '@ferroframe/core';\nimport { SvelteAdapter } from '@ferroframe/svelte-adapter';\nimport App from './App.svelte';\n\nconst adapter = new SvelteAdapter();\nconst app = await adapter.mount(App);\n\nconst host = new FerroHost();\nawait host.mount(app);\n```\n\n## 🏗️ Architecture\n\nFerroFrame uses a host-based architecture where:\n\n1. **Host Layer**: Manages the terminal, input, and rendering lifecycle\n2. **Component Layer**: Svelte components that declare the UI\n3. **Layout Engine**: Calculates positions using flexbox algorithms\n4. **Renderer**: Efficiently draws to the terminal using ANSI sequences\n\n## 📚 Documentation\n\nDocumentation is coming soon. For now, please refer to:\n- The examples in the `examples/` directory\n- The source code in `packages/` for implementation details\n- The CLI help: `ferro help`\n\n\u003c!-- Future documentation:\n- Getting Started Guide\n- API Reference\n- Component Library Documentation\n- Layout System Guide\n- More Examples\n--\u003e\n\n## 🧩 Built-in Components\n\n- `Box` - Flexbox container with borders and padding\n- `Text` - Styled text rendering with colors\n- `Input` - Text input field with cursor management\n- `Button` - Interactive button with variants\n- `List` - Scrollable, selectable list\n- More components coming soon!\n\n## 🛠️ Development\n\n```bash\n# Clone the repository\ngit clone https://github.com/profullstack/ferroframe.git\ncd ferroframe\n\n# Install dependencies\npnpm install\n\n# Run tests\nferro test\n# or\npnpm test\n\n# Build all packages\nferro build\n# or\npnpm build\n\n# Watch mode for development\nferro watch\n# or\npnpm watch\n\n# Run specific example\nferro dev example hello-world\nferro dev example svelte-todo\n```\n\n## 📖 Examples\n\nCheck out the [examples](examples/) directory for:\n\n- [Hello World](examples/hello-world) - Basic interactive counter\n- [Svelte Todo](examples/svelte-todo) - Todo app with Svelte stores\n\nRun examples using the CLI:\n```bash\n# Run hello-world example\nferro dev example hello-world\n\n# Run svelte-todo example  \nferro dev example svelte-todo\n```\n\n## 🎨 Styling \u0026 Theming\n\nFerroFrame supports comprehensive styling options:\n\n```javascript\nimport { Box, Text } from '@ferroframe/components';\n\nBox({\n  // Flexbox properties\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'center',\n  alignItems: 'center',\n  gap: 2,\n  \n  // Box model\n  padding: 2,\n  margin: 1,\n  \n  // Borders\n  border: 'single',\n  borderColor: 'cyan',\n  \n  // Sizing\n  width: 50,\n  height: 20,\n  \n  children: [\n    Text({\n      children: 'Styled Text',\n      color: 'green',\n      backgroundColor: 'black',\n      bold: true,\n      underline: true\n    })\n  ]\n});\n```\n\n## 🚦 Project Status\n\n**Current Version**: 0.3.0\n**Status**: ✅ Production Ready - All core features implemented\n\n### Completed Features:\n- ✅ Core TUI framework with host and renderer\n- ✅ Complete flexbox layout engine\n- ✅ Component system with lifecycle management\n- ✅ Built-in component library\n- ✅ Svelte adapter with reactive stores\n- ✅ CLI tool with `ferro` command\n- ✅ Development tools (hot reload, watch mode)\n- ✅ Project scaffolding\n- ✅ Working examples\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## 📄 License\n\nMIT © Profullstack, Inc.\n\n## 🙏 Acknowledgments\n\n- Inspired by [Ink](https://github.com/vadimdemedes/ink) and [Blessed](https://github.com/chjj/blessed)\n- Built with [Svelte](https://svelte.dev)\n- Terminal rendering powered by ANSI escape sequences\n\n---\n\n**Ready to build your next TUI?** Get started with `ferro new my-app` 🚀","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprofullstack%2Fferroframe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprofullstack%2Fferroframe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprofullstack%2Fferroframe/lists"}