Skip to main content
After uploading your resume, Wrkks provides a comprehensive editor to customize every aspect of your personal website. Switch between Preview and Edit modes to see changes in real-time.

​
Editor interface

The website editing page (/website) includes three main components:
  • Preview button: View your website as visitors will see it
  • Edit button: Switch to editing mode with the ResumeEditor component
  • Website Style dropdown: Choose between Simple and Bento visual styles
The editor uses the ResumeEditor component which provides a full-featured form interface with all your resume sections.

​
Editing sections

The editor is organized into logical sections that map to your website layout.

​
Personal information

Edit your header details:
  • Name: Your full name (e.g., “Elon Tusk”)
  • Headline: Professional title (e.g., “CEO of X-tra Large Projects”)
  • Location: Current location (e.g., “Starbase, Texas / Orbit”)

​
About section

The Short About field uses a Textarea component where you can write a brief professional summary. This appears prominently on your website to introduce yourself to visitors.

​
Work experience

Manage your professional history with these fields for each position:
  • Job Title: Your role or position
  • Company: Organization name
  • Location: Job location
  • Start Date and End Date: Employment period
  • Description: Responsibilities and achievements (one per line)
Each work experience entry appears in a card with a delete button (X icon) in the top-right corner. Click “Add Work Experience” to create new entries.

​
Projects

Showcase your work with project cards:
  • Project Name: Title of the project
  • Role: Your role in the project
  • Start Date and End Date: Project timeline
  • Project Link: URL to GitHub repo or live demo
  • Description: Project details (one per line becomes a bullet point)

​
Education

Add your academic background:
  • Degree: Degree type (e.g., “Bachelor of Science”)
  • School: University or institution name
  • Start Date and End Date: Study period
Additional fields like branch and SGPA are available but optional.

​
Skills

Skills are managed differently from other sections:
  1. Existing skills appear as tags with an X button to remove them
  2. Skills combine both languages and frameworks/tools
  3. Use the EditSkillsDialog component to add new skills
To remove a skill, click the X icon on the skill tag. This immediately updates your resume data.

​
Extracurricular activities

Add activities, volunteering, or achievements in a single Textarea:
  • Enter one activity per line
  • Each line becomes a separate bullet point on your website
  • Placeholder example: “Volunteering at…” or “Won 1st place in…”

​
Custom sections

Create additional sections for certifications, languages, or any other information:
1

Add a custom section

Click “Add Custom Section” at the bottom of the editor.
2

Name the section

Enter a Section Title (e.g., “Certifications”, “Languages”, “Awards”).
3

Add items

Fill in the Items textarea with one entry per line (e.g., “AWS Certified Solutions Architect”).
Each custom section can be deleted using the X button in the top-right corner.

​
Editor behavior

​
Real-time updates

All changes you make in the editor update the useResumeStore state immediately. When you switch back to Preview mode, your changes are visible instantly.

​
Adding and removing items

Throughout the editor:
  • Add buttons use a dashed border style and include a Plus icon
  • Delete buttons appear as X icons in the top-right of each card
  • Cards use a consistent border rounded-lg p-5 style

​
Form validation

The editor doesn’t enforce required fields—you can leave sections empty if they don’t apply to you. The preview intelligently hides empty sections.
If no resume data exists, the editor displays: “No resume data found. Please upload or enter text to begin.”

​
Preview modes

Toggle between editing and previewing to see how your changes look:
  • Preview mode: Shows your website with the selected style (Simple or Bento)
  • Edit mode: Displays the full ResumeEditor form interface
Both modes are accessible from the same page using the eye icon (Preview) and pen icon (Edit) buttons.

​
Next steps

After editing your content:

Build docs developers (and LLMs) love

Get started for freeTalk to us