pxToolkit - Micro Frontend Toolkit

License

pxToolkit is developed by Soixam, primarily to support internal projects at soixam.org. However, pxToolkit is open source under the Apache License 2.0. You are free to use, modify, and distribute it, including for commercial purposes — as long as you retain the original copyright and attribution.

Setup

pxToolkit consists of two files, px.min.css and px.min.js. You’re free to download and place them anywhere — just don’t forget to update the file paths in your HTML.

Although pxToolkit embraces minimalism and coding freedom, it requires your HTML structure to be well-formed for optimal performance (sample.html).

Hook

pxToolkit offers hooks at critical stages of the application lifecycle.

PXInit: Triggered immediately when pxToolkit initializes, before any assets are loaded.
PXReady: Triggered on DOMContentLoaded, when the document is fully loaded and ready for scripts to execute.
PXLoaded: Triggered when the user interacts with the page for the first time — through actions like clicking, scrolling, or typing.
PXUserActive: Triggered when the user starts interacting with the page. Ideal for loading third-party scripts, such as Google Tag Manager, Turnstile, and more.

Example: One of the cool things about pxToolkit is that you can inject code at any point on the page.

<script>PXUserActive.push(function(){alert('User Interacted');});</script>

Functions

pxToolkit includes a set of essential utility functions designed for your convenience.

PX.version(): Returns the current version of pxToolkit in use.

PX.uuid(): Generates a random UUID string.

PX.range(int:from,int:to): Creates an array of numbers from 'from' to 'to' (inclusive).

PX.rand(int:min,int:max): Returns a random integer between min and max (inclusive).

PX.randFloat(float:min,float:max): Returns a random floating-point number between min and max.

PX.randText(int:length): Generates a random alphanumeric string with the specified length.

PX.shuffle(array:data,int:seed): Randomly shuffles the elements in the 'data' array, optionally using a seed for consistent results.

PX.chance(float:percent): Returns true or false based on the probability percentage. For example, if percent = 25, approximately 25 out of 100 calls will return true.

PX.escape(string:data): Escapes the input string to prevent XSS attacks.

PX.attrEscape(string:data): Escapes the input string for safe use in HTML attributes.

await PX.hash(string:algorithm,string:data): Returns a hashed string of the data using the specified algorithm. Supports CRC32, SHA-1, SHA-256, SHA-384, and SHA-512.

await PX.sleep(int:milliseconds): Pauses code execution for the specified number of milliseconds.

AJAX

pxToolkit provides simplified AJAX utilities that extend beyond the native fetch() API. These tools offer better error handling, built-in loaders, progress tracking, and request cancellation features.

PX.showError(string:message): Displays a full-screen error message overlay (recommended for critical errors).

PX.showLoader(): Displays a loading spinner overlay to indicate ongoing processes.

PX.hideLoader(): Hides the loading spinner overlay.

await PX.fetch(object:options): An enhanced fetch() function supporting upload progress tracking, request cancellation, and automatic timeout handling.

Dialog

pxToolkit offers a fully customizable dialog system for creating alerts, confirmations, prompts, and custom modal dialogs with ease.

PX.dialog(object:options): Creates a fully custom dialog box with flexible configuration options.

await PX.alert(string:message,string:title): Quickly creates an alert dialog with a title and message.

await PX.warn(string:message,string:title): Quickly creates a warning dialog with a title and message.

await PX.error(string:message,string:title): Quickly creates an error dialog with a title and message.

await PX.confirm(string:message,string:title): Quickly creates a confirmation dialog to capture user decision.

await PX.prompt(string:message,string:title): Quickly creates a prompt dialog to capture user input.

Namespaces

pxToolkit organizes related functions into namespaces to keep your code clean and structured.

PX.XOR

Provides basic XOR-based encryption and random number generation using the Xorshift algorithm.

PX.XOR.shift(int:seed) or PX.XOR.rand(int:seed): Generates a pseudo-random number based on the provided seed using the Xorshift algorithm.

PX.XOR.encrypt(string:data,string:key): Encrypts a string using XOR encryption with the specified key.

PX.XOR.decrypt(string:data,string:key): Decrypts a string that was encrypted with XOR encryption.

PX.AES

Offers AES-GCM encryption utilities for secure data handling.

await PX.AES.iv(): Generates a random Initialization Vector (IV) for AES encryption and decryption.

await PX.AES.encrypt(string:data,string:key,string:iv): Encrypts data using AES-GCM with the provided key and IV.

await PX.AES.decrypt(string:data,string:key,string:iv): Decrypts data using AES-GCM with the provided key and IV.

PX.Cookie

Provides a simple API for managing browser cookies.

PX.Cookie.get(string:name): Retrieves the value of a cookie by its name.

PX.Cookie.set(string:name,string:value,object:options): Sets or updates a cookie with optional parameters like expires, path, domain, secure, and sameSite.

PX.Cookie.list(): Returns an object containing all current cookies.

PX.Cookie.delete(string:name,object:options): Deletes a specific cookie by its name.

PX.Cookie.clear(object:options): Deletes all cookies available in the current scope.

PX.LocalStorage

Provides a structured API for managing browser LocalStorage with auto-parsing and safe operations.

PX.LocalStorage.get(string:key): Retrieves the value associated with the specified key, parsed from JSON.

PX.LocalStorage.set(string:key,mixed:value): Stores a value under the specified key, automatically stringifying it as JSON.

PX.LocalStorage.list(): Returns an object containing all key-value pairs in LocalStorage.

PX.LocalStorage.delete(string:key): Deletes a specific key from LocalStorage.

PX.LocalStorage.clear(): Clears all data from LocalStorage.

PX.LocalStorage.size(): Returns the number of stored items in LocalStorage.

PX.SessionStorage

Provides a similar API to LocalStorage but scoped to the current browser session only.

PX.SessionStorage.get(string:key): Retrieves the value associated with the specified key from SessionStorage.

PX.SessionStorage.set(string:key,mixed:value): Stores a value under the specified key in SessionStorage.

PX.SessionStorage.list(): Returns an object containing all key-value pairs in SessionStorage.

PX.SessionStorage.delete(string:key): Deletes a specific key from SessionStorage.

PX.SessionStorage.clear(): Clears all data from SessionStorage.

PX.SessionStorage.size(): Returns the number of stored items in SessionStorage.

Customize Functions and Namespaces

You can extend pxToolkit by defining your own custom functions or namespaces using the following methods:

PX.define(string:function_name,function:callback);

PX.namespace(string:name,object:object);

Form Controls

pxToolkit provides a variety of form control components that are fully styled and responsive out of the box. These controls are designed to maintain consistency across your application, with built-in support for light/dark modes, disabled states, and different visual themes.

Textbox:

@example.com

Disabled Textbox:

Password:

Date:

Datetime:

Textarea:

Select Box:

Dropdown List Box:

Checkbox:

Checkbox 1 Checkbox 2

Radio:

Radio 1 Radio 2

Switch Box:

Checkbox 1 Checkbox 2 Checkbox 3 Checkbox 4 Checkbox 5

Disabled Button:

Dark / Light Mode:

Loader:

Notification Dialogs:

Prompt Dialogs:

Note

Notes are used to highlight important messages or reminders within the application. They come in multiple color variations to represent different types of alerts or information.

This is a standard note

This is a critical note

This is a success note

This is an informational note

This is a warning note

This is an alert note