Skip to main content

writeStaticFile()v4.0.147

Saves some content into a file in the public directory.
This API is useful for building interactive experiences in the Remotion Studio.

Examples​

Write 'Hello world' to public/file.txt
tsx
import React, { useCallback } from "react";
import { writeStaticFile } from "@remotion/studio";
 
export const WriteStaticFileComp: React.FC = () => {
  const saveFile = useCallback(async () => {
    await writeStaticFile({
      filePath: "file.txt",
      contents: "Hello world",
    });
 
    console.log("Saved!");
  }, []);
 
  return <button onClick={saveFile}>Save</button>;
};
Write 'Hello world' to public/file.txt
tsx
import React, { useCallback } from "react";
import { writeStaticFile } from "@remotion/studio";
 
export const WriteStaticFileComp: React.FC = () => {
  const saveFile = useCallback(async () => {
    await writeStaticFile({
      filePath: "file.txt",
      contents: "Hello world",
    });
 
    console.log("Saved!");
  }, []);
 
  return <button onClick={saveFile}>Save</button>;
};
Allow a file upload
tsx
import React, { useCallback } from "react";
import { writeStaticFile } from "@remotion/studio";
 
export const WriteStaticFileComp: React.FC = () => {
  const saveFile = useCallback(
    async (e: React.ChangeEvent<HTMLInputElement>) => {
      const file = e.target.files![0];
 
      await writeStaticFile({
        filePath: file.name,
        contents: await file.arrayBuffer(),
      });
 
      console.log("Saved!");
    },
    [],
  );
 
  return <input type="file" onChange={saveFile} />;
};
Allow a file upload
tsx
import React, { useCallback } from "react";
import { writeStaticFile } from "@remotion/studio";
 
export const WriteStaticFileComp: React.FC = () => {
  const saveFile = useCallback(
    async (e: React.ChangeEvent<HTMLInputElement>) => {
      const file = e.target.files![0];
 
      await writeStaticFile({
        filePath: file.name,
        contents: await file.arrayBuffer(),
      });
 
      console.log("Saved!");
    },
    [],
  );
 
  return <input type="file" onChange={saveFile} />;
};

Rules​

1
 This API can only be used while in the Remotion Studio.
2
 The file path must be relative to the public directory.
3
 It's not allowed to write outside the public directory.
4
 To write into subfolders, use forward slashes / even on Windows.
5
 You can pass a string or ArrayBuffer.

See also​