Front-End Library

The Worklio Embedded Payroll Front-End library (WEP FE) is for front-end developers. It simplifies working with the WEP API and lets you integrate a native U.S. payroll solution into your codebase. For how the component library compares with the API and iFrame paths, see What is embedded payroll. For the access token the WEP API requires, see How to get API access.

Prerequisites

Packages

The repository contains library packages, which you integrate into your app, and playground packages, which are example apps for exploring the components in a working flow.

Library packages

Playground packages

Set up the repository

Step 1: Request repository access

Contact Worklio support to request access to the private GitHub repository: worklio.com/contact-us.

Step 2: Clone the repository

Clone the repository to your machine. Make sure Node.js 22.x is installed first (see Prerequisites).

Step 3: Install dependencies

Run npm ci from the repository root. It installs the exact versions in the lockfile, so every install is clean and repeatable.

npm ci

Step 4: Build the library and run a playground

Build the library packages for your framework, then start the matching playground.

npm run build -w @worklio/wep -w @worklio/wep-vue
npm run dev -w playground-vue

npm run build -w @worklio/wep -w @worklio/wep-react
npm run dev -w playground-react

Step 5: Render your first component

Start with a single form field to confirm that components render and bind to your state in your framework. The field renders with the label Display name.

<script setup lang="ts">
import { ref } from 'vue';
import { WepFormField, WepTextBox } from '@worklio/wep-vue';

const value = ref('');
</script>

<template>
  <WepFormField label="Display name">
    <WepTextBox v-model="value" />
  </WepFormField>
</template>

import { WepFormField, WepTextBox } from '@worklio/wep-react';

export function Example() {
  return (
    <WepFormField label="Display name">
      <WepTextBox value="" onValueUpdate={() => {}} />
    </WepFormField>
  );
}

Component documentation

Component documentation is written as stories that live next to the components. View the published stories, or run them locally.

Recommended IDE setup

Visual Studio Code gives the best editing and TypeScript experience for this repository. If you work on Vue components, also install the Vue - Official extension.