Improve code-editing guidance in tutorials

Open
#3,296 2 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
48/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
typescript
Domain
frontend

Research direction

Locate the tutorial code that controls Tutorial Copilot prompts, API Reference filtering, code-drag-hint, code-delete-hint, code-change-hint, and diff comparison. Trace how these controls are used in a tutorial, then verify that only relevant APIs appear, drag guidance is absent, full phrases are compared, and Copilot stays behind the scenes when users can proceed independently.

Written by the indexing model from the issue text.

Description

Problem

  • Current tutorials rely mainly on Tutorial Copilot text instructions, so users need to infer which code to delete, change, or add from written descriptions.
  • For first-time users, text-only guidance is not direct enough and can lead to misunderstanding.
  • If Copilot intervenes too heavily, it weakens the experience of completing the tutorial independently.

What Needs Improvement

  • Keep Copilot as a behind-the-scenes assistant in tutorials, providing prompts only when users cannot proceed.
  • Limit API Reference to the APIs used in the current tutorial.
  • Remove drag guidance (code-drag-hint).
  • Keep code-editing guidance (code-delete-hint, code-change-hint).
  • Compare diffs at the full-phrase level, not at the individual-character level.

Expected Outcome

  • Users can more clearly understand which code to edit and how to edit it.
  • Tutorial guidance becomes more direct without feeling overly hand-held.

Acceptance Criteria

  • API Reference only shows APIs relevant to the current tutorial.
  • Drag guidance (code-drag-hint) is removed.
  • Diff comparison is shown at the full-phrase level.
  • Copilot does not over-intervene when users can proceed independently.
Dominant language
TypeScript
Stars
70
Forks
59
Avg merge
1d 18h
Merged PRs (30d)
56

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from goplus/builder

All issues in goplus/builder

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.