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

my-landing-page/
  ├── pages/
  │   └── index.js      # Main page configuration
  ├── public/           # Static assets (images, etc.)
  ├── package.json
  └── node_modules/

Creating Pages

// pages/index.js
const pauljs = require('pauljs');
const app = pauljs.createApp();

// Create home page
app.createPage('/', {
  title: 'Welcome',
  description: 'My awesome landing page',
  hero: {
    title: 'Welcome to My Site',
    subtitle: 'The best landing page ever',
    ctaText: 'Get Started',
    ctaUrl: '#signup'
  },
  cta: {
    title: 'Ready to Start?',
    description: 'Join us today!',
    primaryButtonText: 'Sign Up',
    primaryButtonUrl: '/signup'
  }
});

// Create additional pages
app.createPage('/about', {
  title: 'About Us',
  // ... component configurations
});

module.exports = app;

Using Components

Vanilla JavaScript/HTML

const { components } = require('pauljs');

// Render a hero section
const heroHtml = components.hero({
  title: 'Welcome to My Site',
  subtitle: 'Build amazing landing pages quickly',
  ctaText: 'Get Started',
  ctaUrl: '/signup'
});

React Integration

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

// Convert a PaulJS component to a React component
const HeroComponent = convertToReactComponent(components.hero, {
  title: 'Welcome to My Site',
  subtitle: 'Build amazing landing pages quickly',
  ctaText: 'Get Started',
  ctaUrl: '/signup'
});

// Use in your React app
function App() {
  return (
    <div>
      <HeroComponent />
    </div>
  );
}

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' }
  ]
});

Development Commands

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

Customization

All components accept style overrides through props:

components.hero({
  backgroundColor: '#000',
  textColor: '#fff',
  // ... other props
});

JSPM

pauljs