{"id":30226870,"url":"https://github.com/remotion-dev/template-still","last_synced_at":"2025-08-14T17:08:48.176Z","repository":{"id":47464779,"uuid":"393696318","full_name":"remotion-dev/template-still","owner":"remotion-dev","description":"Create still images with Remotion","archived":false,"fork":false,"pushed_at":"2025-07-24T09:51:36.000Z","size":316,"stargazers_count":37,"open_issues_count":0,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-10T01:21:34.429Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.remotion.dev/templates/still","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/remotion-dev.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":"2021-08-07T13:49:58.000Z","updated_at":"2025-07-24T09:51:40.000Z","dependencies_parsed_at":"2025-02-06T08:21:21.488Z","dependency_job_id":"e9273bde-5564-4ebe-a691-5a4cb2d5cbf9","html_url":"https://github.com/remotion-dev/template-still","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/remotion-dev/template-still","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remotion-dev%2Ftemplate-still","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remotion-dev%2Ftemplate-still/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remotion-dev%2Ftemplate-still/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remotion-dev%2Ftemplate-still/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/remotion-dev","download_url":"https://codeload.github.com/remotion-dev/template-still/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remotion-dev%2Ftemplate-still/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270452355,"owners_count":24586165,"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-08-14T02:00:10.309Z","response_time":75,"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":[],"created_at":"2025-08-14T17:08:44.149Z","updated_at":"2025-08-14T17:08:48.171Z","avatar_url":"https://github.com/remotion-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Remotion Still Image template\n\nA template for designing still images with dynamic data with built-in server for deploying to the cloud.\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://remotion-still.herokuapp.com/PreviewCard.jpeg?title=Still%20image%20generator\u0026description=Dynamic%20images%20generation%20service%20with%20full%20design%20freedom\u0026slogan=Powered%20by%0ARemotion\u0026c=1\"\u003e\n\u003c/p\u003e\n\n## Commands\n\n**Design mode: Create an image in React**\n\n```console\nnpm run dev\n```\n\n**Render it**\n\n```console\nnpx remotion render\n```\n\n**Keep Remotion up to date**\n\n```console\nnpx remotion upgrade\n```\n\n## Server\n\nYou can run a server that serves dynamic images based on it's URL. Run\n\n```console\nnpm run server\n```\n\nAnd then visit `http://localhost:8000/PreviewCard.png?title=Hello+World` in your browser to render an image.\n\n- Specify the ID of the composition you want to render after the `/`. You can edit the compositions in `src/Video.tsx`.\n- Add either a `.png` or a `.jpeg` extension depending on which image format you want.\n- You can add input props to your React component by adding query strings: `?title=Hello+World\u0026description=foobar` will pass `{\"title\": \"Hello World\", \"description\": \"foo bar\"}` to the component.\n\n### Caching\n\nIn `src/server/config.ts`, you can configure three types of caching:\n\n- `\"filesystem\"`, the default, will cache generated images locally. This is a good way of caching if you host the server on a non-ephemereal platform and have enough storage.\n- `\"none\"` will disable all caching and calculate all images on the fly.\n\n- `\"s3-bucket\"` will cache images in a S3 bucket. If you choose this option, you need to provide `AWS_ACCESS_KEY_ID` and `AWS_SECRET_ACCESS_KEY` environment variables containing AWS credentials which have permission of reading and writing to S3 as well as configure a bucket name and region in `src/server/config.ts`.\n\n\u003cdetails\u003e\n\u003csummary\u003eHow to set up an S3 bucket\u003c/summary\u003e\n\u003cul\u003e\n\u003cli\u003eGo to https://s3.console.aws.amazon.com/s3/home and create a new bucket. You can leave the \"Deny all public access\" checkbox checked.\n\u003c/li\u003e\n\u003cli\u003e\nFill out region and bucket name in \u003ccode\u003esrc/server/config.ts\u003c/code\u003e.\n\u003c/li\u003e\n\u003cli\u003e\nGo to https://console.aws.amazon.com/iamv2/home?#/users to create a new user. While creating, enable \"Programmatic Access\". When adding permissions, choose \"Attach existing policies directly\" and then search for \"AmazonS3FullAccess\" and assign it.\n\u003c/li\u003e\n\u003cli\u003e\nIn the last step you will get a value for \u003ccode\u003eAWS_ACCESS_KEY_ID\u003c/code\u003e and \u003ccode\u003eAWS_SECRET_ACCESS_KEY\u003c/code\u003e which you need to set as an environment variable. Locally, you can rename the \u003ccode\u003e.env.example\u003c/code\u003e file to \u003ccode\u003e.env\u003c/code\u003e. When you deploy the server, you can set the environment variables in the dashboard of your provider.\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/details\u003e\n\n### Deploy to Heroku\n\nTo deploy the server to Heroku, you need to add the Google Chrome Buildpack. Go to the settings of your Heroku app and in the `Buildpacks` section, add `https://github.com/heroku/heroku-buildpack-google-chrome` as a buildpack.\n\n### Deploy to DigitalOcean\n\nThe easiest way to deploy to DigitalOcean is to use the dockerized image and run it on the DigitalOcean App Platform. Go to https://cloud.digitalocean.com/apps/new and connect your Github repository and deploy the\n\n### Serverless\n\nUse [Remotion Lambda](https://remotion.dev/lambda) if you want to render stills inside a Lambda function.\n\n## Docs\n\nGet started with Remotion by reading the [fundamentals page](https://www.remotion.dev/docs/the-fundamentals).\n\n## Help\n\nWe provide help on our [Discord server](https://discord.gg/6VzzNDwUwV).\n\n## Issues\n\nFound an issue with Remotion? [File an issue here](https://github.com/remotion-dev/remotion/issues/new).\n\n## License\n\nNote that for some entities a company license is needed. [Read the terms here](https://github.com/remotion-dev/remotion/blob/main/LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremotion-dev%2Ftemplate-still","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fremotion-dev%2Ftemplate-still","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremotion-dev%2Ftemplate-still/lists"}