Package Exports

pauljs
pauljs/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (pauljs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PaulJS

A lightweight framework for building fast landing pages. PaulJS provides modular, reusable components that can be used standalone or integrated with popular JavaScript frameworks like React.

Features

Fast & Lightweight: Optimized for performance and quick loading times
Modular Components: Pre-built, customizable components for common landing page sections
Framework Agnostic: Use standalone or integrate with React (more frameworks coming soon)
Responsive Design: Mobile-first components that look great on all devices
Customizable: Easy to style and modify to match your brand
Built-in Server: Development server with hot reloading
Static Export: Generate static HTML for production
Routing Support: Create multi-page landing sites easily

Installation

npm install -g pauljs

Quick Start

Create a new project:

pauljs create my-landing-page
cd my-landing-page
npm install

Start development server:

npm run dev

Build for production:

npm run build

Project Structure

When you create a new PaulJS project, it comes with the following structure:

my-landing-page/
  ├── pages/          # Page configurations
  │   └── index.js    # Main page
  ├── components/     # Custom components
  │   ├── CustomHero.js
  │   ├── CustomCTA.js
  │   └── CustomFooter.js
  ├── styles/        # Custom styles
  │   └── main.css   # Global styles and component overrides
  ├── public/        # Static assets (images, fonts, etc.)
  └── package.json

Pages

The pages directory contains your page configurations. Each page can have its own layout and components:

// pages/index.js
const pauljs = require('pauljs');
const CustomHero = require('../components/CustomHero');

const app = pauljs.createApp();

app.createPage('/', {
  title: 'My Landing Page',
  hero: CustomHero({
    title: 'Welcome',
    subtitle: 'Build amazing landing pages'
  })
});

module.exports = app;

Custom Components

Create custom components by extending PaulJS base components:

// components/CustomHero.js
const pauljs = require('pauljs');
const { components } = pauljs;

function CustomHero(props) {
  return components.hero({
    ...props,
    backgroundColor: '#f7fafc',
    textColor: '#2d3748'
  });
}

module.exports = CustomHero;

Styling

Customize your components using CSS:

/* styles/main.css */
:root {
  --primary-color: #3182ce;
  --secondary-color: #2d3748;
}

.pauljs-hero {
  /* Override hero styles */
}

.pauljs-cta {
  /* Override CTA styles */
}

Available Components

Hero Section

components.hero({
  title: 'Your Title',
  subtitle: 'Your subtitle text',
  ctaText: 'Button Text',
  ctaUrl: '/your-link',
  backgroundColor: '#f8f9fa',
  textColor: '#212529'
});

Call to Action (CTA)

components.cta({
  title: 'Ready to Start?',
  description: 'Join thousands of users...',
  primaryButtonText: 'Get Started',
  primaryButtonUrl: '/signup',
  secondaryButtonText: 'Learn More',
  secondaryButtonUrl: '/docs'
});

components.footer({
  companyName: 'Your Company',
  links: [
    { text: 'About', url: '/about' },
    { text: 'Contact', url: '/contact' }
  ]
});

React Integration

PaulJS components can be used in React applications:

const { components, adapters } = require('pauljs');
const { convertToReactComponent } = adapters.react;

// Convert a PaulJS component to a React component
const HeroComponent = convertToReactComponent(components.hero, {
  title: 'Welcome',
  subtitle: 'Build amazing landing pages'
});

Development Commands

npm run dev - Start development server with hot reloading
npm start - Start production server
npm run build - Build static site for production

pauljs