{"id":20942912,"url":"https://github.com/dominicfung/tshirt-editor","last_synced_at":"2025-10-12T07:26:13.947Z","repository":{"id":52491524,"uuid":"519863018","full_name":"DominicFung/tshirt-editor","owner":"DominicFung","description":"A Toast UI Image Editor you can embed on your Shopify site (or other e-commerce site). It connects to your Print On Demand of choice!","archived":false,"fork":false,"pushed_at":"2022-09-01T02:20:48.000Z","size":3344,"stargazers_count":20,"open_issues_count":2,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-12T07:26:13.574Z","etag":null,"topics":["api","aws","printful","shopify"],"latest_commit_sha":null,"homepage":"","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/DominicFung.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}},"created_at":"2022-07-31T18:59:34.000Z","updated_at":"2025-08-23T17:43:07.000Z","dependencies_parsed_at":"2022-08-13T02:00:48.869Z","dependency_job_id":null,"html_url":"https://github.com/DominicFung/tshirt-editor","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/DominicFung/tshirt-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DominicFung%2Ftshirt-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DominicFung%2Ftshirt-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DominicFung%2Ftshirt-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DominicFung%2Ftshirt-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DominicFung","download_url":"https://codeload.github.com/DominicFung/tshirt-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DominicFung%2Ftshirt-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279010653,"owners_count":26084784,"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-12T02:00:06.719Z","response_time":53,"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":["api","aws","printful","shopify"],"created_at":"2024-11-18T23:31:59.524Z","updated_at":"2025-10-12T07:26:13.897Z","avatar_url":"https://github.com/DominicFung.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Embeddable Tshirt Editor ![version]\n\n\u003e A **Toast UI Image Editor**[^1] you can embed on your **Shopify** site (or other e-commerce site). It connects to your **Print On Demand** of choice!\n\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/DominicFung/tshirt-editor/blob/main/instructions/images/1.demo-shot.png?raw=true\" align=\"center\"\n     alt=\"Screenshot of Logistical.ly\" width=\"830\" height=\"456\"\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n## Preface\n\n***To those who want an e-commerce edge ..*** \n\nWhether it's to give your customers more design autonomy as you consult or allow your customers to tweak your proprietary designs, this editor is designed to give your customers convenience of designing right from your storefront. \n\n***More about me and the state of this project:***\n\nFeel free to request new features [here](https://github.com/DominicFung/tshirt-editor/issues/new) and label it as an \"*enhancement*\"! For now, to make this work, you need to compile both the app (into a Javascript bundle) AND spin up your own cloud infrastructure (all code and instructions below). This is not for the faint of heart but feel free to reach out to me for any clarification.\n\n\u003cbr /\u003e\n\n\u003e You will need to install a couple of dev tools including:\n\u003e - **git** *(for pulling this source code, not required - you can also just hit the download button on the left)*\n\u003e - **node \u0026 npm** *(installing and compiling the source code)*\n\u003e - **text editor** *(for adding your own api token)*\n\u003e - **AWS** account (Azure is coming soon)\n\nCurrent or intended features:\n - [x] Bundling to Shopify\n - [x] Image Editor Integration (Toast-ui/image-editor)\n - - [x] Save User Session\n - - [x] Rename Files before submitting\n - - [ ] View Saved Files\n - [x] Print On Demand API hookup (Printify / Printful / etc.)\n - - [x] Printful\n - - - [x] Add image to Printful platform\n - - - [x] User identity tied to folder structure\n - - - [ ] Create Order after upload [ref](https://developers.printful.com/docs/#section/Orders-API-examples)\n - - - [ ] Generate Mockups [ref](https://developers.printful.com/docs/#tag/Mockup-Generator-API)\n - - [ ] Printify\n - [x] Cloud Infrastructure\n - - [x] AWS\n - - [ ] Azure\n\n\n[version]:       https://img.shields.io/badge/version-1.1-green\n\n\u003cbr /\u003e\n\n# Getting Started\n\n## Installing Dev Tools \u0026 Getting the Latest TShirt Editor Source Code\n\nThe only installation you really need is [NodeJS](https://nodejs.org/en/download/). Let's get that now. Please install the LTS (Long Term Support) version on your platform of choice (Windows / MacOS).\n\nFor more detailed instructions:\n - [MacOS](https://nodesource.com/blog/installing-nodejs-tutorial-mac-os-x/)\n - [Windows]()\n\n\u003cbr /\u003e\n\n### Getting the Source Code\n```\ngit clone https://github.com/DominicFung/tshirt-editor.git\n```\nOr download it by clicking the green \"Code\" button at the top right and clicking \"Download ZIP\"\n\n\u003cbr /\u003e\n\n## Getting Your Print On Demand API Key\n- Getting your [Printful API Key](./instructions/Printful/Printful.md)\n- Getting your [Printify API Key](./instructions/Printify/Printify.md)\n\n\u003cbr /\u003e\n\n## Creating your secret.json\n\n```\n{\n  \"platform\": \"api.printful.com\",\n  \"token\": \"\u003cTOKEN HERE\u003e\"\n}\n```\n\n\u003cbr /\u003e\n\n## Spinning up your Cloud Infrastructure\n\nSince Printful / Printify are CORS protected backend APIs - we need our own cloud infrastructure. Most platforms also don't have an internal storage (relying on an image storage you provide). To keep cost low, our IaC uses serverless solutions when possible.\n\n- Spinning up [AWS Infrastructure](./backend/aws/README.md)\n- Spinning up [Azure Infrastructure](./backend/azure/README.md)\n\n\u003cbr /\u003e\n\n## Compiling your JavaScript Bundle\n\nOpen a command prompt or shell terminal.\n```\ncd \u003cLocation of this Source Code\u003e\ncd editor \u0026 npm install\nnpm run shop-build\n```\n\n## Create a new Template\n\nGo to the admin page. Click edit code and create a new template. You can call it whatever you want, but I used `page.react-test.liquid`\n\nAdd the following code snippet:\n```\n\u003cscript defer type=\"module\" src=\"{{ \"bundle.js\" | asset_url }}\"\u003e\u003c/script\u003e\n\u003cdiv id=\"react-shopify-test\"\u003e\n  \u003cimg src=\"https://github.com/DominicFung/tshirt-editor/blob/main/public/tshirt-editor-blur.png?raw=true\" alt=\"blur tshrit editor\" /\u003e\n\u003c/div\u003e\n```\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/DominicFung/tshirt-editor/blob/main/instructions/images/2.edit-code.png?raw=true\" align=\"center\"\n     alt=\"Screenshot of Logistical.ly\" width=\"830\" height=\"320\"\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\u003cbr /\u003e\n\n## Uploading the JS bundle\n\nDownload all files inside the `dist/` folder. Upload them into the `assets/` folder on the Shopify Admin console.\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/DominicFung/tshirt-editor/blob/main/instructions/images/3.upload-js.png?raw=true\" align=\"center\"\n     alt=\"Screenshot of Logistical.ly\" width=\"830\" height=\"390\"\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\u003cbr /\u003e\n\n## Create a new page using the Template\n\nSave and Exit the code editor. Go to \"Online Store\" -\u003e \"Pages\", Click on \"Add page\" button. You can call it whatever you want. For the \"Theme template\", choose the one we just created aka: \"react-test\".\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/DominicFung/tshirt-editor/blob/main/instructions/images/4.new-page.png?raw=true\" align=\"center\"\n     alt=\"Screenshot of Logistical.ly\" width=\"830\" height=\"456\"\u003e\n\u003c/p\u003e\n\n\n```\nrefs:\n  https://www.cadence-labs.com/2019/12/how-to-add-react-to-a-shopify-theme/\n  https://skcript.com/svr/using-webpack-with-react-typescript/\n```\n\n[^1]: https://ui.toast.com/tui-image-editor","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdominicfung%2Ftshirt-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdominicfung%2Ftshirt-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdominicfung%2Ftshirt-editor/lists"}