Skip to main content
The editor forms allow users to input and manage their resume data. Each form component is connected to the useResume hook for state management and provides an intuitive interface for data entry.

​
Form Components

​
PersonalInfoForm

The PersonalInfoForm component collects basic contact and personal information. Location: src/components/Editor/PersonalInfoForm.tsx:6 Features:
  • Two-column grid layout for efficient space usage
  • Integrated with useResume hook for state management
  • Real-time updates as you type
  • Placeholder text for guidance
Fields:
​
fullName
string
User’s full name (e.g., “John Doe”)
​
jobTitle
string
Current or desired job title (e.g., “Software Engineer”)
​
email
string
Email address with email validation
​
phone
string
Phone number with tel input type
​
location
string
Current location (e.g., “New York, NY”)
​
website
string
Personal website URL
​
linkedin
string
LinkedIn profile URL
​
github
string
GitHub profile URL
Example Usage: 
import { PersonalInfoForm } from './components/Editor/PersonalInfoForm';

function Editor() {
  return <PersonalInfoForm />;
}

​
ExperienceForm

The ExperienceForm component manages work experience entries with add/remove functionality. Location: src/components/Editor/ExperienceForm.tsx:9 Features:
  • Add multiple experience entries
  • Animated entry/exit transitions using Framer Motion
  • “Currently working here” checkbox that disables end date
  • Individual remove buttons for each entry
  • Empty state message when no entries exist
Entry Fields:
​
company
string
Company or organization name
​
position
string
Job title or role
​
location
string
Work location
​
startDate
string
Start date (format: MM/YYYY)
​
endDate
string
End date (format: MM/YYYY or “Present”) - disabled when current is true
​
current
boolean
Whether this is the current position
​
description
string
Multi-line description of responsibilities and achievements
Integration with useResume: 
const { resumeData, addExperience, updateExperience, removeExperience } = useResume();

// Add new experience
addExperience();

// Update a field
updateExperience(expId, 'company', 'Tech Corp');

// Remove an entry
removeExperience(expId);

​
EducationForm

The EducationForm component manages educational background entries. Location: src/components/Editor/EducationForm.tsx:9 Features:
  • Similar structure to ExperienceForm
  • Animated transitions for adding/removing entries
  • Grid layout for organized input fields
  • Empty state when no education is added
Entry Fields:
​
school
string
Institution name
​
degree
string
Degree type (e.g., “Bachelor of Science”)
​
field
string
Field of study (e.g., “Computer Science”)
​
startDate
string
Start year (format: YYYY)
​
endDate
string
End year (format: YYYY)
​
description
string
Additional details like coursework, honors, GPA

​
SkillsForm

The SkillsForm component provides a tag-based interface for managing skills. Location: src/components/Editor/SkillsForm.tsx:9 Features:
  • Form-based skill addition
  • Tag-style display with remove buttons
  • Animated skill badges using Framer Motion
  • Input clearing after adding a skill
Implementation Pattern: 
const [newSkill, setNewSkill] = useState('');

const handleAddSkill = (e: React.FormEvent) => {
  e.preventDefault();
  if (newSkill.trim()) {
    addSkill(newSkill.trim());
    setNewSkill('');
  }
};
Skills Data Structure:
​
id
string
Unique identifier (generated with crypto.randomUUID())
​
name
string
Skill name (e.g., “React”, “TypeScript”)

​
ProjectsForm

The ProjectsForm component manages personal or professional project entries. Location: src/components/Editor/ProjectsForm.tsx:9 Entry Fields:
​
name
string
Project name
​
githubUrl
string
GitHub repository URL
​
liveUrl
string
Live demo or production URL
​
description
string
Project description and key features

​
CustomSectionForm

The CustomSectionForm component allows users to create custom resume sections. Location: src/components/Editor/CustomSectionForm.tsx:9 Features:
  • Two-level management: sections and items within sections
  • Add custom section titles (e.g., “Volunteer”, “Awards”)
  • Each section can have multiple items
  • Remove entire sections or individual items
Section Structure:
​
id
string
Section unique identifier
​
title
string
Section title displayed in the resume
​
items
array
Array of custom section items
Item Fields:
​
title
string
Item title (e.g., role or award name)
​
subtitle
string
Item subtitle (e.g., organization or issuer)
​
startDate
string
Start date (format: MM/YYYY)
​
endDate
string
End date (format: MM/YYYY)
​
description
string
Item description
Usage Example: 
const { 
  addCustomSection, 
  removeCustomSection,
  addCustomSectionItem,
  updateCustomSectionItem,
  removeCustomSectionItem 
} = useResume();

// Create a new section
addCustomSection('Awards');

// Add an item to the section
addCustomSectionItem(sectionId);

// Update an item field
updateCustomSectionItem(sectionId, itemId, 'title', 'Best Developer Award');

​
Common Form Patterns

​
State Management Integration

All form components follow a consistent pattern for state management:
  1. Extract data from context: const { resumeData, ...methods } = useResume()
  2. Render input fields: Connected to resume data via value prop
  3. Handle changes: Call update methods from useResume hook
  4. Local state: Only used for temporary input (like newSkill in SkillsForm)

​
Animation Pattern

Forms with multiple entries use Framer Motion for smooth transitions: 
import { motion, AnimatePresence } from 'framer-motion';

<AnimatePresence>
  {items.map((item) => (
    <motion.div
      key={item.id}
      initial={{ opacity: 0, height: 0 }}
      animate={{ opacity: 1, height: 'auto' }}
      exit={{ opacity: 0, height: 0 }}
      style={{ overflow: 'hidden' }}
    >
      {/* Item content */}
    </motion.div>
  ))}
</AnimatePresence>

​
Component Composition

Forms are composed using the UI component library:
  • Card: Container with optional title and action buttons
  • Input: Text input fields with labels
  • TextArea: Multi-line text input
  • Button: Action buttons with icons and variants
See the UI Components page for detailed component documentation.

​
Form Validation

Currently, forms rely on:
  • HTML5 input types (email, tel) for basic validation
  • Trim operations to prevent empty entries
  • Disabled states for conditional fields (like end date when current job)
Future enhancements may include more comprehensive validation using a library like Zod or Yup.

Build docs developers (and LLMs) love

Get started for freeTalk to us