{"id":41467537,"url":"https://github.com/testpress/flimix-studio","last_synced_at":"2026-01-23T16:34:19.363Z","repository":{"id":306581851,"uuid":"1026655505","full_name":"testpress/flimix-studio","owner":"testpress","description":null,"archived":false,"fork":false,"pushed_at":"2026-01-19T19:57:02.000Z","size":1480,"stargazers_count":0,"open_issues_count":12,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-19T21:00:00.752Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/testpress.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-07-26T10:33:28.000Z","updated_at":"2026-01-19T13:39:53.000Z","dependencies_parsed_at":"2025-07-26T16:38:04.584Z","dependency_job_id":"dc1e7b51-1f5a-4984-89b1-9570343e679b","html_url":"https://github.com/testpress/flimix-studio","commit_stats":null,"previous_names":["testpress/flimix-studio"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/testpress/flimix-studio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testpress%2Fflimix-studio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testpress%2Fflimix-studio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testpress%2Fflimix-studio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testpress%2Fflimix-studio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/testpress","download_url":"https://codeload.github.com/testpress/flimix-studio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testpress%2Fflimix-studio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28695553,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-23T15:57:05.722Z","status":"ssl_error","status_checked_at":"2026-01-23T15:56:27.656Z","response_time":59,"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":[],"created_at":"2026-01-23T16:34:18.681Z","updated_at":"2026-01-23T16:34:19.348Z","avatar_url":"https://github.com/testpress.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flimix Studio\n\n**Flimix Studio** is a powerful visual page builder designed specifically for OTT (Over-The-Top) platforms like Netflix, Amazon Prime, Disney+, and Hotstar. It provides a complete visual editing experience for creating marketing pages, landing pages, and content discovery interfaces.\n\n## What is Flimix Studio?\n\nFlimix Studio is a React-based visual editor that renders a complete page builder interface. It allows content creators and developers to:\n\n- **Build visually** - Add and configure blocks to create pages\n- **Edit in real-time** - See changes instantly as you build\n- **Export structured data** - Get clean JSON schemas for rendering across platforms\n- **Integrate seamlessly** - Embed the studio into any web application\n\n## Key Features\n\n- **16+ Pre-built Blocks** - Hero carousels, poster grids, text blocks, CTAs, and more\n- **Real-time Visual Editing** - Live preview with instant updates\n- **Cross-platform Output** - JSON schemas work on web, mobile, and TV\n- **Responsive Design** - Automatically adapts to different screen sizes\n- **Theme Support** - Dark/light themes with customizable styling\n- **Platform Targeting** - Show/hide content based on device or region\n- **Undo/Redo** - Full history management for safe editing\n- **Block-based Architecture** - Modular, extensible block system\n\n## Tech Stack\n\n- **React 19** - Latest React with concurrent features\n- **TypeScript** - Full type safety and IntelliSense\n- **Tailwind CSS v4** - Modern utility-first styling\n- **Vite** - Fast build tool and dev server\n- **Lucide React** - Beautiful icon library\n\n## Installation \u0026 Setup\n\nFlimix Studio is distributed as a static JavaScript file that gets served from a cloud storage bucket. There's no npm package installation required.\n\n## Development\n\n### Prerequisites\n- Node.js 18+\n- npm or yarn\n\n### Setup\n```bash\n# Clone the repository\ngit clone https://github.com/your-org/flimix-studio.git\ncd flimix-studio\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n\n# Build for production\nnpm run build\n```\n\n### Project Structure\n```\nsrc/\n├── blocks/           # Individual block implementations\n│   ├── hero/         # Hero block (carousel, single)\n│   ├── carousel/      # Content carousels\n│   ├── text/          # Text content\n│   └── ...           # Other blocks\n├── components/        # Shared UI components\n├── context/          # React context providers\n├── layout/           # Main layout components\n├── renderer/         # Block rendering engine\n└── utils/            # Utility functions\n```\n\n### Deployment Options\n\n#### Local Development with MinIO\n\nFor local development and testing, you can use a local MinIO bucket:\n\n1. **Set up environment variables** (create `.env` file):\n```bash\n# MinIO Configuration\nMINIO_ENDPOINT=http://localhost:9000\nMINIO_ACCESS_KEY=admin\nMINIO_SECRET_KEY=admin123\nMINIO_BUCKET_NAME=flimix\nMINIO_REGION=us-east-1\n```\n\n2. **Deploy to local MinIO bucket**:\n```bash\nnpm run deploy:local\n```\n\nThis will:\n- Build the project (`npm run build`)\n- Upload `dist/js/flimix-studio.js` and `dist/css/flimix-studio.css` to your local MinIO bucket\n- Make the files available at: `http://localhost:9000/flimix/static/studio/`\n\n3. **Use in integration**:\n```html\n\u003c!-- Use local MinIO URLs --\u003e\n\u003clink rel=\"stylesheet\" href=\"http://localhost:9000/bucket-name/static/studio/css/flimix-studio.css\"\u003e\n\u003cscript src=\"http://localhost:9000/bucket-name/static/studio/js/flimix-studio.js\"\u003e\u003c/script\u003e\n```\n\n#### Production Deployment\n\nFor production deployment, use GitHub Actions:\n\n1. **Trigger deployment**:\n\n**Automatic**: Push to main branch\n```bash\ngit push origin main\n```\n\n**Manual**: Go to GitHub Actions tab and manually trigger the deployment workflow.\n\n3. **GitHub Action will**:\n- Build the project\n- Upload to production bucket\n- Make files available at: `https://your-production-bucket.com/flimix-studio-prod/static/studio/`\n\n4. **Use in production integration**:\n```html\n\u003c!-- Use production URLs --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://your-production-bucket.com/bucket-name/static/studio/css/flimix-studio.css\"\u003e\n\u003cscript src=\"https://your-production-bucket.com/bucket-name/static/studio/js/flimix-studio.js\"\u003e\u003c/script\u003e\n```\n\n## Quick Start\n\n### Basic HTML Integration\n\n```html\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.0\"\u003e\n    \u003ctitle\u003eFlimix Studio\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://your-bucket.com/bucket-name/static/studio/css/flimix-studio.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv id=\"flimix-studio-container\" style=\"height: 100vh;\"\u003e\u003c/div\u003e\n    \n    \u003cscript src=\"https://your-bucket.com/bucket-name/static/studio/js/flimix-studio.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n        window.FlimixStudio.onReady(function() {\n            const root = window.FlimixStudio.render(\n                document.getElementById('flimix-studio-container'),\n                {\n                    schema: {\n                        'home': {\n                            title: 'My Landing Page',\n                            theme: 'dark',\n                            blocks: []\n                        }\n                    },\n                    onSavePage: async function( schema) {\n                        console.log('Saving page:', pageSlug, schema);\n                        // Handle save logic here\n                    }\n                }\n            );\n        });\n    \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Available Blocks\n\nThe studio comes with 16+ pre-built blocks optimized for OTT platforms:\n\n### Content Blocks\n- **Hero** - Full-width hero sections with carousel support\n- **Carousel** - Horizontal scrolling content rows\n- **Poster Grid** - Grid layouts for movie/show posters\n- **Text** - Rich text content with typography controls\n- **Image** - Single images with various sizing options\n- **Video** - Video players with HLS support\n\n### Layout Blocks\n- **Section** - Container blocks for grouping content\n- **Spacer** - Add vertical spacing between blocks\n- **Divider** - Visual separators between sections\n- **Tabs** - Tabbed content organization\n\n### Interactive Blocks\n- **CTA Button** - Call-to-action buttons with multiple variants\n- **Badge Strip** - Horizontal scrolling badges/tags\n- **FAQ Accordion** - Expandable question/answer sections\n- **Testimonial** - Customer testimonials and reviews\n- **Feature Callout** - Highlight key features or benefits\n\n## JSON Schema Structure\n\nThe studio outputs clean, structured JSON that can be rendered across any platform:\n\n```json\n{\n  \"title\": \"Amazon Prime Landing Page\",\n  \"theme\": \"dark\",\n  \"visibility\": {\n    \"platform\": [\"mobile\", \"desktop\", \"tv\"],\n    \"region\": [\"US\", \"CA\", \"UK\"]\n  },\n  \"blocks\": [\n    {\n      \"type\": \"hero\",\n      \"id\": \"hero-001\",\n      \"props\": {\n        \"variant\": \"carousel\",\n        \"items\": [\n          {\n            \"id\": \"hero-item-1\",\n            \"title\": \"Jurassic World Rebirth\",\n            \"subtitle\": \"Epic adventure awaits\",\n            \"backgroundImage\": \"https://example.com/hero-bg.jpg\",\n            \"primaryCTA\": {\n              \"label\": \"Watch Now\",\n              \"link\": \"/watch/jurassic-world\"\n            }\n          }\n        ]\n      },\n      \"style\": {\n        \"backgroundColor\": \"#000000\",\n        \"textColor\": \"#ffffff\",\n        \"padding\": \"lg\"\n      },\n      \"visibility\": {\n        \"platform\": [\"mobile\", \"desktop\"]\n      }\n    }\n  ]\n}\n```\n\n## Styling \u0026 Theming\n\n### Built-in Themes\n- **Dark Theme** - Optimized for OTT platforms\n- **Light Theme** - Clean, modern appearance\n\n### Custom Styling\nEach block supports extensive styling options:\n- Colors (background, text, borders)\n- Spacing (padding, margins)\n- Typography (fonts, sizes, weights)\n- Layout (alignment, sizing)\n- Effects (shadows, borders, opacity)\n\n### Responsive Design\n- Automatic responsive behavior\n- Platform-specific visibility controls\n- Device-optimized layouts\n\n## API Reference\n\n### `window.FlimixStudio.render(element, props)`\n\nRenders the Flimix Studio interface into a DOM element.\n\n**Parameters:**\n- `element: HTMLElement` - DOM element to render into\n- `props: Object` - Configuration options\n\n**Returns:** `Root` - React root instance for cleanup\n\n### Configuration Options\n\n```javascript\n{\n  id: 'home-page', // Can be a string or a number\n  schema: {\n    title: 'Page Title',\n    theme: 'dark', // or 'light'\n    blocks: [] // Array of block objects\n  },\n  onSavePage: async function(id, schema) {\n    // Handle page saving - called when user saves a page\n    // Return a Promise\n  }\n}\n```\n\n### Global API\n\n```javascript\n// Wait for studio to be ready\nwindow.FlimixStudio.onReady(function() {\n  // Studio is ready to use\n});\n\n// Render the studio\nconst root = window.FlimixStudio.render(container, options);\n\n// Unmount the studio\nwindow.FlimixStudio.unmount();\n```\n\n## Platform Support\n\n### Rendering Platforms\n- **Web** - React components for web applications\n- **Mobile** - React Native compatible schemas\n- **TV** - Smart TV and set-top box applications\n- **Desktop** - Electron and desktop applications\n\n**Built with ❤️ for the OTT industry** - Empowering content creators to build beautiful, engaging experiences across all platforms.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftestpress%2Fflimix-studio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftestpress%2Fflimix-studio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftestpress%2Fflimix-studio/lists"}