Documentation

Everything you need to build amazing web applications with NullKode

Getting Started

Welcome to NullKode! This guide will help you create your first web application in minutes.

Step 1: Create Your Account

1

Sign up for a free NullKode account to get started. You can use your email or connect with Google, GitHub, or Microsoft.

Create Account

Step 2: Create Your First Project

2

Once logged in, click "Create New Project" from your dashboard. Give it a name and description.

Project Name: "My First App"
Description: "A simple web application"

Step 3: Start Building

3

Open the builder and start dragging components onto the canvas. It's that simple!

Tip: Start with basic components like text, buttons, and images to get familiar with the interface.

Drag & Drop Builder

The drag & drop builder is the heart of NullKode. It allows you to visually create your application without writing code.

Interface Overview

Component Panel

Browse and drag components from the left panel onto your canvas.

Canvas Area

The main workspace where you build your application layout.

Properties Panel

Customize selected components with colors, text, and settings.

Canvas Controls

  • Device Preview: Switch between mobile, tablet, desktop, and full-screen views
  • Grid Toggle: Show/hide the alignment grid
  • Zoom Controls: Zoom in/out for precise positioning
  • Undo/Redo: Revert or restore your changes
Keyboard Shortcuts:
Ctrl+Z: Undo
Ctrl+Y: Redo
Delete: Remove selected component
Ctrl+C: Copy component
Ctrl+V: Paste component

Components

NullKode offers a comprehensive library of pre-built components to accelerate your development.

Basic Components

Text Components
  • Headings (H1-H6)
  • Paragraphs
  • Labels
  • Quotes
Interactive Components
  • Buttons
  • Links
  • Forms
  • Input Fields

Layout Components

Containers
  • Sections
  • Dividers
  • Cards
  • Columns
Navigation
  • Navigation Bars
  • Breadcrumbs
  • Pagination
  • Tabs

Advanced Components

Charts
  • Bar Charts
  • Line Charts
  • Pie Charts
  • Scatter Plots
Data Display
  • Tables
  • Lists
  • Cards
  • Galleries
Modals & Overlays
  • Modal Dialogs
  • Tooltips
  • Popovers
  • Dropdowns

Database Connection

Connect your components to databases to create dynamic, data-driven applications.

Setting Up Database Connection

1

Navigate to the Layout tab in the right panel.

2

Select a component and click "Connect to Database".

3

Choose your table and configure the connection parameters.

Example Configuration:
Table: users
Field: name
Display Format: {{name}}

Supported Database Operations

  • SELECT: Display data from database tables
  • INSERT: Add new records through forms
  • UPDATE: Edit existing records
  • DELETE: Remove records with confirmation
Security: All database operations are automatically secured against SQL injection and other common attacks.

Responsive Design

NullKode automatically creates responsive designs that work on all devices.

Device Breakpoints

Mobile: 375px (iPhone size)
Tablet: 820px (iPad size)
Desktop: 1200px (Standard desktop)
Full: 100% of available space

How It Works

  1. Design your app in desktop view (1200px reference)
  2. Components automatically scale for smaller screens
  3. Font sizes and spacing adjust proportionally
  4. Use device preview to test different screen sizes

Best Practices

  • Test your design on all device sizes
  • Use relative sizing when possible
  • Consider touch-friendly button sizes for mobile
  • Optimize text readability across devices

Deployment

Deploy your application and make it accessible to users.

Export Your Project

1

Click the "Export" button in the builder toolbar.

2

Choose your export format (HTML/CSS/JS or PHP).

3

Download the generated files and upload to your web server.

Hosting Requirements

  • Web server with PHP 7.4+ support
  • MySQL or SQLite database (if using database features)
  • HTTPS recommended for production
File Structure:
project-folder/
├── index.php
├── pages/
│ ├── about.php
│ └── contact.php
└── assets/
├── css/
├── js/
└── images/

Advanced Features

Custom CSS

Add custom CSS styles to fine-tune your design:

/* Custom styles */
.my-custom-button {
  background: linear-gradient(45deg, #667eea, #764ba2);
  border-radius: 25px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

JavaScript Actions

Add interactive behavior to your components:

// Button click handler
function handleClick() {
  alert('Button clicked!');
  // Your custom code here
}

Form Validation

Built-in form validation with custom rules:

  • Required fields
  • Email validation
  • Length constraints
  • Custom regex patterns

Troubleshooting

Common Issues

Components not saving

Solution: Check your internet connection and try refreshing the page. Ensure you have the latest version of your browser.

Database connection errors

Solution: Verify your database credentials and ensure the database server is running. Check for typos in table and field names.

Components not displaying correctly

Solution: Clear your browser cache and try again. Make sure your browser supports modern CSS features.

Getting Help

  • Check the documentation for detailed guides
  • Visit our community forum for user discussions
  • Contact support for technical assistance
  • Join our Discord server for real-time help

API Reference

For advanced users who want to extend NullKode's functionality.

Component API

// Create a new component
NullKode.createComponent({
  type: 'button',
  properties: {
    text: 'Click Me',
    color: '#667eea'
  }
});

Event Handlers

// Listen for component events
NullKode.on('componentAdded', function(component) {
  console.log('Component added:', component);
});

Database API

// Execute database query
NullKode.db.query({
  table: 'users',
  action: 'SELECT',
  fields: ['name', 'email']
});

App Layout Designer

The App Layout Designer provides a visual interface for organizing your app's data flow and creating connections between pages and database tables.

Key Features

  • Visual Layout: Drag and drop pages and tables to organize your app structure
  • Connection System: Create functional connections between components and database tables
  • Field Mapping: Map specific component properties to database columns
  • Auto Code Generation: Automatically generates PHP code for connections
  • Position Persistence: Layout positions are saved and restored

Creating Connections

There are two ways to create connections, both leading to the same functional result:

Method 1: Drag-to-Connect
  1. Click and drag from a colored connection handle on one node
  2. Drop on a matching handle of another node
  3. Connection interface opens with pre-selected type
  4. Configure field mapping and settings
  5. Click "Create Connection" to generate code
Method 2: Connect Button
  1. Click "Connect" button on any node
  2. Select a component from the list
  3. Choose connection type and target
  4. Configure field mapping and behavior
  5. Click "Create Connection" to generate code

Connection Types & Use Cases

Data Connection

Display database content in components like text, headings, or images.

Example: Show product name from database in a heading component.
Form Connection

Submit form data to database tables with field mapping.

Example: Save user input from form fields to database columns.
List Connection

Display multiple database records in lists or tables with pagination.

Example: Show all products from database in a list with pagination controls.
Pagination Connection

Control how lists and tables are paginated.

Example: Add pagination controls that work with a product list.

List & Pagination System

Enhanced List & Pagination: Lists and tables now include built-in pagination support with configurable settings.
List Component Settings
  • Items Per Page: How many records to display (default: 10)
  • Allow Pagination: Enable/disable pagination (default: enabled)
  • Sort Field: Which database field to sort by
  • Sort Order: Ascending or Descending
Generated Variables:
  • $listData - Array of database records
  • $paginationInfo - Pagination details
  • $currentPage - Current page number
  • $totalPages - Total number of pages
Pagination Component
  • Target Table: Which table/list to paginate
  • Max Visible Pages: How many page numbers to show
  • Show First/Last: Include jump to first/last page
  • Show Prev/Next: Include previous/next buttons
Pagination Types:
  • Numbered: 1 2 3 4 5...
  • Simple: Previous | Next
  • Load More: Load More button

Visual Connection Lines

The interface shows visual connection lines between connected elements:

  • Blue lines: Data connections
  • Green lines: Authentication connections
  • Yellow lines: API connections
  • Red lines: Flow connections

Testing Connections

Use the "Test Connections" button in the header to:

  • View all active connections
  • Check connection line rendering
  • Debug connection issues
  • Verify field mappings
Best Practices:
  • Always test connections after creation
  • Use descriptive field mappings
  • Save your layout frequently
  • Check the generated PHP code for correctness
  • Verify database table structures before connecting