License generator in SvelteKit

Create a list of dependencies for you SvelteKit-project

Tom • Svelte & SvelteKit, Coding Guides, Learning •

Generating licenses from your package.json

Creating a JSON-file from your dependencies listed in the package file is really simple. I’m using a library called license-report, which reduces this task to a single command call. I just have to install the package as a development dependency for my project and added the following NPM-script. As you can see, I save the created file in the static-directory for later access.

  "dep:gen": "license-report --output=json > ./static/licenses.json"

With every SvelteKit build

As this is a repetitive task that has to be done before every deployment to ensure a current output, I simply added it to NPM’s build-command. This command is also used by SvelteKit, which means whenever you deploy a new version (and therefore create a new build), the licenses from your dependencies get generated before the actual build.

  "build": "npm run dep:gen && svelte-kit build",

Consuming the licenses

The following code snippets show a real world usage I implemented for A link to the repo is also available in the addendum at the end of this page. I simply fetch the data in a component. Thanks to SvelteKit, the data gets inlined with the component fetch. The result is then passed to a list-view.

// licenses.svelte

<script lang="ts" context="module">
  import type { Load } from "@sveltejs/kit";

  export const prerender = true;

  export const fetch: Load = async () => ({
    status: 200,
    maxage: 60 * 60 * 24

<script lang="ts">
  import PageLayout from "$lib/layout/views/PageLayout.svelte";
  import SectionLayout from "$lib/layout/views/SectionLayout.svelte";
  import LicenseList from "$lib/license/views/LicenseList.svelte";
  import type { ExportedLicense } from "$lib/license/types";
  import DisplayGrid from "$lib/display/views/DisplayGrid.svelte";
  import DisplayGridItem from "$lib/display/views/DisplayGridItem.svelte";
  import DisplaySingularCarouselTitle from "$lib/display/views/DisplaySingularCarouselTitle.svelte";
  import DisplayGridItemCarousel from "$lib/display/views/DisplayGridItemCarousel.svelte";

  export let licenses: ExportedLicense[];

    <DisplayGrid slot="header" variant="2/1">
      <div class="col-span-2">
            <DisplaySingularCarouselTitle slot="0" label="Licenses" />
            <DisplaySingularCarouselTitle slot="1" label={`${licenses.length} in total`} />
            <DisplaySingularCarouselTitle slot="2" label="" />

    <LicenseList {licenses} />

// licenses.ts

import type { EndpointOutput } from "@sveltejs/kit";
import licenses from "../../../static/licenses.json";

export async function get(): Promise<EndpointOutput> {
  // const url = "/licenses.json"; // ""
  // const licenses = await fetch(url).then((response) => response.json());

  if (licenses) {
    return {
      body: { licenses }

  return {
    status: 500

// LicenseList.svelte

<script lang="ts">
  import type { ExportedLicense } from "../types";

  export let licenses: ExportedLicense[];

  {#each licenses as l}
        href={"git+", "").replace(".git", "")}
        alt={`License for ${}`}
        <div class="hover:text-slate-400 duration-200 ease-in-out py-3">



Suggested Posts