How to create videos programmatically using TailwindCSS and Editframe API

Creating videos programmatically has become easier than ever with tools like TailwindCSS and Editframe API. By combining these two technologies, you can create stunning videos with minimal coding.

What is TailwindCSS?

TailwindCSS is a utility-first CSS framework that provides a set of pre-designed classes that can be used to style your website. It is a popular choice for web developers as it allows them to quickly and easily create responsive designs without having to write a lot of custom CSS.

What is Editframe API?

Editframe API is a video creation platform that allows developers to create and edit videos programmatically. It provides a set of APIs that can be used to customize and manipulate video content, such as adding text, images, and videos.

To create videos programmatically using TailwindCSS and Editframe API, follow these steps:

  1. Create a HTML template using TailwindCSS classes to style your video content.
  2. Use Editframe API to create a video project and add your HTML template as the source code.
  3. Customize your video by adding text, images, and animations using Editframe API.
  4. Render your video using Editframe API.

Let's get started

Required tools:

  • Node.js installed on your machine (v16+)
  • Editframe API Token (you can create an account from this link)
  1. Create a folder for the project
mkdir editframe-tailwindcss
  1. Initialize a Node.js project:
yarn init -y
  1. Install the Editframe Node.js SDK:
yarn add @editframe/editframe-js
  1. Create a create-video.js file to create the TailwindCSS video:
const { Editframe } = require("@editframe/editframe-js");
const main = async () => {

  const editframe = new Editframe({
     clientId: process.env.EDITFRAME_CLIENT_ID,
    token: process.env.EDITFRAME_TOKEN,
  });

  const composition = await editframe.videos.new({
    dimensions: {
      height:1080,
      width: 1920
    },
    duration: 5,
    backgroundColor: "#fff",
  });

 await composition.addHtml({
    page: {
      body: `
      <main class="h-screen flex flex-col justify-center bg-gradient-to-r from-slate-50 to-slate-300	">
      <div class="sm:px-8 mt-9">
        <div class="mx-auto max-w-7xl lg:px-8">
          <div class="relative px-4 sm:px-8 lg:px-12">
            <div class="mx-auto max-w-2xl lg:max-w-5xl">
              <div class="max-w-4xl">
                <h1
                  class="text-9xl font-bold tracking-tight text-dark sm:text-5xl"
                >
                  Software Engineer
                </h1>
                <p class="my-14 text-4xl text-zinc-600 dark:text-zinc-400">
                  I am a video made using TailwindCSS and Editframe API. By combining these two technologies, it was possible to create a stunning video with minimal coding.
                </p>
                <div class="mt-6 flex gap-6">
                  <a
                    class="group -m-1 p-1"
                    aria-label="Follow on Twitter"
                    href="https://twitter.com"
                    ><svg
                      viewBox="0 0 24 24"
                      aria-hidden="true"
                      class="h-12 w-12 fill-zinc-500"
                    >
                      <path
                        d="M20.055 7.983c.011.174.011.347.011.523 0 5.338-3.92 11.494-11.09 11.494v-.003A10.755 10.755 0 0 1 3 18.186c.308.038.618.057.928.058a7.655 7.655 0 0 0 4.841-1.733c-1.668-.032-3.13-1.16-3.642-2.805a3.753 3.753 0 0 0 1.76-.07C5.07 13.256 3.76 11.6 3.76 9.676v-.05a3.77 3.77 0 0 0 1.77.505C3.816 8.945 3.288 6.583 4.322 4.737c1.98 2.524 4.9 4.058 8.034 4.22a4.137 4.137 0 0 1 1.128-3.86A3.807 3.807 0 0 1 19 5.274a7.657 7.657 0 0 0 2.475-.98c-.29.934-.9 1.729-1.713 2.233A7.54 7.54 0 0 0 22 5.89a8.084 8.084 0 0 1-1.945 2.093Z"
                      ></path></svg></a
                  ><a
                    class="group -m-1 p-1"
                    aria-label="Follow on Instagram"
                    href="https://instagram.com"
                    ><svg
                      viewBox="0 0 24 24"
                      aria-hidden="true"
                      class="h-12 w-12 fill-zinc-500"
                    >
                      <path
                        d="M12 3c-2.444 0-2.75.01-3.71.054-.959.044-1.613.196-2.185.418A4.412 4.412 0 0 0 4.51 4.511c-.5.5-.809 1.002-1.039 1.594-.222.572-.374 1.226-.418 2.184C3.01 9.25 3 9.556 3 12s.01 2.75.054 3.71c.044.959.196 1.613.418 2.185.23.592.538 1.094 1.039 1.595.5.5 1.002.808 1.594 1.038.572.222 1.226.374 2.184.418C9.25 20.99 9.556 21 12 21s2.75-.01 3.71-.054c.959-.044 1.613-.196 2.185-.419a4.412 4.412 0 0 0 1.595-1.038c.5-.5.808-1.002 1.038-1.594.222-.572.374-1.226.418-2.184.044-.96.054-1.267.054-3.711s-.01-2.75-.054-3.71c-.044-.959-.196-1.613-.419-2.185A4.412 4.412 0 0 0 19.49 4.51c-.5-.5-1.002-.809-1.594-1.039-.572-.222-1.226-.374-2.184-.418C14.75 3.01 14.444 3 12 3Zm0 1.622c2.403 0 2.688.009 3.637.052.877.04 1.354.187 1.67.31.421.163.72.358 1.036.673.315.315.51.615.673 1.035.123.317.27.794.31 1.671.043.95.052 1.234.052 3.637s-.009 2.688-.052 3.637c-.04.877-.187 1.354-.31 1.67-.163.421-.358.72-.673 1.036a2.79 2.79 0 0 1-1.035.673c-.317.123-.794.27-1.671.31-.95.043-1.234.052-3.637.052s-2.688-.009-3.637-.052c-.877-.04-1.354-.187-1.67-.31a2.789 2.789 0 0 1-1.036-.673 2.79 2.79 0 0 1-.673-1.035c-.123-.317-.27-.794-.31-1.671-.043-.95-.052-1.234-.052-3.637s.009-2.688.052-3.637c.04-.877.187-1.354.31-1.67.163-.421.358-.72.673-1.036.315-.315.615-.51 1.035-.673.317-.123.794-.27 1.671-.31.95-.043 1.234-.052 3.637-.052Z"
                      ></path>
                      <path
                        d="M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6Zm0-7.622a4.622 4.622 0 1 0 0 9.244 4.622 4.622 0 0 0 0-9.244Zm5.884-.182a1.08 1.08 0 1 1-2.16 0 1.08 1.08 0 0 1 2.16 0Z"
                      ></path></svg></a
                  ><a
                    class="group -m-1 p-1"
                    aria-label="Follow on GitHub"
                    href="https://github.com"
                    ><svg
                      viewBox="0 0 24 24"
                      aria-hidden="true"
                      class="h-12 w-12 fill-zinc-500"
                    >
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M12 2C6.475 2 2 6.588 2 12.253c0 4.537 2.862 8.369 6.838 9.727.5.09.687-.218.687-.487 0-.243-.013-1.05-.013-1.91C7 20.059 6.35 18.957 6.15 18.38c-.113-.295-.6-1.205-1.025-1.448-.35-.192-.85-.667-.013-.68.788-.012 1.35.744 1.538 1.051.9 1.551 2.338 1.116 2.912.846.088-.666.35-1.115.638-1.371-2.225-.256-4.55-1.14-4.55-5.062 0-1.115.387-2.038 1.025-2.756-.1-.256-.45-1.307.1-2.717 0 0 .837-.269 2.75 1.051.8-.23 1.65-.346 2.5-.346.85 0 1.7.115 2.5.346 1.912-1.333 2.75-1.05 2.75-1.05.55 1.409.2 2.46.1 2.716.637.718 1.025 1.628 1.025 2.756 0 3.934-2.337 4.806-4.562 5.062.362.32.675.936.675 1.897 0 1.371-.013 2.473-.013 2.82 0 .268.188.589.688.486a10.039 10.039 0 0 0 4.932-3.74A10.447 10.447 0 0 0 22 12.253C22 6.588 17.525 2 12 2Z"
                      ></path></svg></a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mt-16 mx-auto">
        <div
          class="flex justify-between gap-5 overflow-hidden"
        >
          <div
            class="relative w-96 flex-none overflow-hidden rounded-xl"
          >
            <img
              alt=""
              src="https://images.unsplash.com/photo-1655897731395-530a59105b31?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80"
            />
          </div>
          <div
            class="relative  w-96 flex-none overflow-hidden rounded-xl"
          >
            <img
              alt=""
              src="https://images.unsplash.com/flagged/photo-1563536314719-2e812e896f50?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80"
              class="absolute inset-0 h-full w-full object-cover"
            />
          </div>
          <div
            class="relative  w-96 flex-none overflow-hidden rounded-xl"
          >
            <img
              alt=""
              src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80"
              class="absolute inset-0 h-full w-full object-cover"
            />
          </div>
        </div>
      </div>
      </div>
    </main>
`,
    },
    withTailwind: true,
    withTransparentBackground: true,
  });

 const video = await composition.encode();
 console.log(video)
};

main();

Let’s break down what the code above is doing.

  • In this line, we’ll initialize an Editframe instance with the Editframe API Token (obtained by creating an Editframe application):
const editframe = new Editframe({
    clientId: process.env.EDITFRAME_CLIENT_ID,
    token: process.env.EDITFRAME_TOKEN,
  });

  const composition = await editframe.videos.new({
    dimensions: {
      height: 1080,
      width: 1920
    },
    duration: 5,
    backgroundColor: "#fff",
  });
  • To add HTML content, use the composition.addHtml function which returns a promise. The HTML content can be passed in the body option for the page attribute. Additionally, you can enable the withTailwind option to true to use the Tailwind CSS play CDN.
  • If you have a custom Tailwind CSS file or configuration, you can include it in the head attribute of your HTML content along with the full HTML content.
 await composition.addHtml({
    page: {
      body: `
      <main class="h-screen flex flex-col justify-center bg-gradient-to-r from-slate-50 to-slate-300	">
      <div class="sm:px-8 mt-9">
        <div class="mx-auto max-w-7xl lg:px-8">
          <div class="relative px-4 sm:px-8 lg:px-12">
            <div class="mx-auto max-w-2xl lg:max-w-5xl">
              <div class="max-w-4xl">
                <h1
                  class="text-9xl font-bold tracking-tight text-dark sm:text-5xl"
                >
                  Software Engineer
                </h1>
                <p class="my-14 text-4xl text-zinc-600 dark:text-zinc-400">
                  I am a video made using TailwindCSS and Editframe API. By combining these two technologies, it was possible to create a stunning video with minimal coding.
                </p>
                <div class="mt-6 flex gap-6">
                  <a
                    class="group -m-1 p-1"
                    aria-label="Follow on Twitter"
                    href="https://twitter.com"
                    ><svg
                      viewBox="0 0 24 24"
                      aria-hidden="true"
                      class="h-12 w-12 fill-zinc-500"
                    >
                      <path
                        d="M20.055 7.983c.011.174.011.347.011.523 0 5.338-3.92 11.494-11.09 11.494v-.003A10.755 10.755 0 0 1 3 18.186c.308.038.618.057.928.058a7.655 7.655 0 0 0 4.841-1.733c-1.668-.032-3.13-1.16-3.642-2.805a3.753 3.753 0 0 0 1.76-.07C5.07 13.256 3.76 11.6 3.76 9.676v-.05a3.77 3.77 0 0 0 1.77.505C3.816 8.945 3.288 6.583 4.322 4.737c1.98 2.524 4.9 4.058 8.034 4.22a4.137 4.137 0 0 1 1.128-3.86A3.807 3.807 0 0 1 19 5.274a7.657 7.657 0 0 0 2.475-.98c-.29.934-.9 1.729-1.713 2.233A7.54 7.54 0 0 0 22 5.89a8.084 8.084 0 0 1-1.945 2.093Z"
                      ></path></svg></a
                  ><a
                    class="group -m-1 p-1"
                    aria-label="Follow on Instagram"
                    href="https://instagram.com"
                    ><svg
                      viewBox="0 0 24 24"
                      aria-hidden="true"
                      class="h-12 w-12 fill-zinc-500"
                    >
                      <path
                        d="M12 3c-2.444 0-2.75.01-3.71.054-.959.044-1.613.196-2.185.418A4.412 4.412 0 0 0 4.51 4.511c-.5.5-.809 1.002-1.039 1.594-.222.572-.374 1.226-.418 2.184C3.01 9.25 3 9.556 3 12s.01 2.75.054 3.71c.044.959.196 1.613.418 2.185.23.592.538 1.094 1.039 1.595.5.5 1.002.808 1.594 1.038.572.222 1.226.374 2.184.418C9.25 20.99 9.556 21 12 21s2.75-.01 3.71-.054c.959-.044 1.613-.196 2.185-.419a4.412 4.412 0 0 0 1.595-1.038c.5-.5.808-1.002 1.038-1.594.222-.572.374-1.226.418-2.184.044-.96.054-1.267.054-3.711s-.01-2.75-.054-3.71c-.044-.959-.196-1.613-.419-2.185A4.412 4.412 0 0 0 19.49 4.51c-.5-.5-1.002-.809-1.594-1.039-.572-.222-1.226-.374-2.184-.418C14.75 3.01 14.444 3 12 3Zm0 1.622c2.403 0 2.688.009 3.637.052.877.04 1.354.187 1.67.31.421.163.72.358 1.036.673.315.315.51.615.673 1.035.123.317.27.794.31 1.671.043.95.052 1.234.052 3.637s-.009 2.688-.052 3.637c-.04.877-.187 1.354-.31 1.67-.163.421-.358.72-.673 1.036a2.79 2.79 0 0 1-1.035.673c-.317.123-.794.27-1.671.31-.95.043-1.234.052-3.637.052s-2.688-.009-3.637-.052c-.877-.04-1.354-.187-1.67-.31a2.789 2.789 0 0 1-1.036-.673 2.79 2.79 0 0 1-.673-1.035c-.123-.317-.27-.794-.31-1.671-.043-.95-.052-1.234-.052-3.637s.009-2.688.052-3.637c.04-.877.187-1.354.31-1.67.163-.421.358-.72.673-1.036.315-.315.615-.51 1.035-.673.317-.123.794-.27 1.671-.31.95-.043 1.234-.052 3.637-.052Z"
                      ></path>
                      <path
                        d="M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6Zm0-7.622a4.622 4.622 0 1 0 0 9.244 4.622 4.622 0 0 0 0-9.244Zm5.884-.182a1.08 1.08 0 1 1-2.16 0 1.08 1.08 0 0 1 2.16 0Z"
                      ></path></svg></a
                  ><a
                    class="group -m-1 p-1"
                    aria-label="Follow on GitHub"
                    href="https://github.com"
                    ><svg
                      viewBox="0 0 24 24"
                      aria-hidden="true"
                      class="h-12 w-12 fill-zinc-500"
                    >
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M12 2C6.475 2 2 6.588 2 12.253c0 4.537 2.862 8.369 6.838 9.727.5.09.687-.218.687-.487 0-.243-.013-1.05-.013-1.91C7 20.059 6.35 18.957 6.15 18.38c-.113-.295-.6-1.205-1.025-1.448-.35-.192-.85-.667-.013-.68.788-.012 1.35.744 1.538 1.051.9 1.551 2.338 1.116 2.912.846.088-.666.35-1.115.638-1.371-2.225-.256-4.55-1.14-4.55-5.062 0-1.115.387-2.038 1.025-2.756-.1-.256-.45-1.307.1-2.717 0 0 .837-.269 2.75 1.051.8-.23 1.65-.346 2.5-.346.85 0 1.7.115 2.5.346 1.912-1.333 2.75-1.05 2.75-1.05.55 1.409.2 2.46.1 2.716.637.718 1.025 1.628 1.025 2.756 0 3.934-2.337 4.806-4.562 5.062.362.32.675.936.675 1.897 0 1.371-.013 2.473-.013 2.82 0 .268.188.589.688.486a10.039 10.039 0 0 0 4.932-3.74A10.447 10.447 0 0 0 22 12.253C22 6.588 17.525 2 12 2Z"
                      ></path></svg></a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mt-16 mx-auto">
        <div
          class="flex justify-between gap-5 overflow-hidden"
        >
          <div
            class="relative w-96 flex-none overflow-hidden rounded-xl"
          >
            <img
              alt=""
              src="https://images.unsplash.com/photo-1655897731395-530a59105b31?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80"
            />
          </div>
          <div
            class="relative  w-96 flex-none overflow-hidden rounded-xl"
          >
            <img
              alt=""
              src="https://images.unsplash.com/flagged/photo-1563536314719-2e812e896f50?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80"
              class="absolute inset-0 h-full w-full object-cover"
            />
          </div>
          <div
            class="relative  w-96 flex-none overflow-hidden rounded-xl"
          >
            <img
              alt=""
              src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80"
              class="absolute inset-0 h-full w-full object-cover"
            />
          </div>
        </div>
      </div>
      </div>
    </main>
`,
    },
    withTailwind: true,
    withTransparentBackground: true,
  });
  • To render the video, we call the Editframe API either asynchronously using the composition.encode() function or synchronously using the composition.encodeSync() function. For testing (async option), you can use webhook.site for webhooks.
 const video = await composition.encode();
 console.log(video)

Et voilà! You now have a video powered by Tailwind CSS and the Editframe API, ready to be shared with the world.

Conclusion

Creating videos programmatically using TailwindCSS and Editframe API is a powerful way to create stunning video content with minimal coding. By following the steps outlined above, you can quickly and easily create custom video content that can be used for marketing, social media, and more.

Landscape picture
© 2024 Editframe
Making video creation easier for software developers.
Have a question?