{"id":25929802,"url":"https://github.com/naren219/variable-editor","last_synced_at":"2026-04-13T03:44:37.938Z","repository":{"id":277278813,"uuid":"929916401","full_name":"Naren219/variable-editor","owner":"Naren219","description":"create variable images","archived":false,"fork":false,"pushed_at":"2025-03-12T02:26:31.000Z","size":451,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-12T03:27:40.336Z","etag":null,"topics":["fabricjs","firebase","nextjs","playwright","typescript"],"latest_commit_sha":null,"homepage":"https://variable-editor.vercel.app","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/Naren219.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}},"created_at":"2025-02-09T17:40:23.000Z","updated_at":"2025-03-12T02:26:34.000Z","dependencies_parsed_at":"2025-03-12T03:23:51.314Z","dependency_job_id":"477f35af-61bc-4ad1-9393-f1f40571afcf","html_url":"https://github.com/Naren219/variable-editor","commit_stats":null,"previous_names":["naren219/variable-editor"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Naren219/variable-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Naren219%2Fvariable-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Naren219%2Fvariable-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Naren219%2Fvariable-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Naren219%2Fvariable-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Naren219","download_url":"https://codeload.github.com/Naren219/variable-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Naren219%2Fvariable-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273088891,"owners_count":25043594,"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-09-01T02:00:09.058Z","response_time":120,"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":["fabricjs","firebase","nextjs","playwright","typescript"],"created_at":"2025-03-03T23:00:05.034Z","updated_at":"2025-10-18T05:52:36.231Z","avatar_url":"https://github.com/Naren219.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg width=\"800\" alt=\"editor view\" src=\"https://github.com/user-attachments/assets/18f288ff-2a48-4df0-a571-2caaa4eef11b\" /\u003e\\\nquick [demo](https://www.loom.com/share/050e3c8a4ae94727aaf74f4d9f4b10c9?sid=1f0074f6-67f5-4315-9aca-2b097ef144c8)\n\n### purpose\nA variable image editor that allows users to import and minimally design a static graphic, then select text, colors, images as variants, allowing for quick customizability.\n\n### app flow\n1. Fabric.js editor: test graphics (only SVG), colors, and text --\u003e produces API url with parameters for variable values and stores full JSON schema in firebase firestore\n2. generate page: parse the parameters and design the final image (uses firebase storage for image hosting)\n3. API link that uses playwright to screenshot the generate page (in a remote webpage) with all parameter variables applied\n\n### APIs\n`/api`: retrieve a single image with changes specified in the URL. example:\\\n`https://variable-editor.vercel.app/api?projectId=myProject\u0026graphicName=graph2.svg\u0026topleft=someTitle\u0026toptag=someTag\u0026topRightImg=profile.svg`\\\n\\\n`/api/csv/`: retrieve many images with variables specified in a CSV. example:\\\n`https://variable-editor.vercel.app/api/csv?projectId=projectId\u0026graphicName=graphicName\u0026topleft=topleft\u0026toptag=toptag\u0026topRightImg=topRightImg`\\\npass in CSV data into the body (with variables as headers). returns a list of generated images uploaded in firebase storage.\n\n### challenges\n#### precise color editing\npotential approaches\n* **computer vision segmentation** - convert SVG into raster image, detect color edges and assign different labels, map these segments onto vector image (could be pretty _hard_)\n* **computer vision flood fill** - consistent segments regardless of the SVG structure\n\n#### matching image placement between fabric.js canvas view and DOM\npotential approaches\n* scale factor so that the image is placed relative to board dimensions\n\n### reference\n#### modifying specific text elements\nadd index to each tagged text element (which are transformed into i-text objects after upload). then, identify the element to modify in `/generate` via the index of that text element\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaren219%2Fvariable-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnaren219%2Fvariable-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaren219%2Fvariable-editor/lists"}